使用addRoute配置动态路由和刷新页面白屏问题

最新推荐文章于 2024-07-02 20:30:00 发布

之五朱

最新推荐文章于 2024-07-02 20:30:00 发布

阅读量572

点赞数

分类专栏： vue.js 前端开发文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_64209130/article/details/132237079

版权

前端开发同时被 2 个专栏收录

28 篇文章

订阅专栏

vue.js

13 篇文章

订阅专栏

文章讲述了在前端路由中实现权限控制的方法，通过`beforeEach`钩子判断用户登录状态，并动态加载和管理有权限的路由，防止页面刷新时的白屏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import {layoutRoutes } from "@/router/static_routes";//权限路由
import router from "./index";
let upatewindow = true//用来判断是否刷新页面
let routes = [];//有权限的路由存储位置

router.beforeEach(async (to, from, next) => {
    const hasToken = sessionStorage.getItem("token");
    if (hasToken !== null) {//判断是否登录
        if (to.path === "/login") {
            next("/");
        } else {
            if (upatewindow) {
                let permission = JSON.parse(sessionStorage.getItem("PermissionPage"));//用户路由权限列表
                await getMenuBtnList(layoutRoutes, permission);
                upatewindow = false
              
                    if (to.path == '/') {
                        next({ path: routes[0].children[0].path, replace: true })//这里是登录后首页指向的位置根据情况修改
                    } else {
                        next({ ...to, replace: true })

                    }
            }

            next()
        }
    } else if (hasToken == null && to.path === "/login") {7
        next();
    } else {
        next("/login");
    }
});

function getMenuBtnList(menuTreeList, permission) {
    routes = []
//在这里进行路由权限判断,每个项目的判断条件不一样这里就空着了
/*
*
*
*/
    sessionStorage.setItem('routes', JSON.stringify(routes))//这里是用来渲染菜单栏,根据项目来判断是否需要
    routes.push({ path: "*", redirect: "/403", hidden: true, children: [{ path: "/403" }] });//访问无权限页面跳转地址
    router.options.routes = routes;//解决页面刷新白屏的重点
    routes.forEach(item => router.addRoute(item))//动态添加路由
}

刷新白屏是因为每次刷新都会重新挂载路由实例,使用router.options.routes就可以解决这个问题