vue-router addRouter添加动态路由，第一次跳转正常，刷新后变空白？

Question

我想用addRouter动态添加权限过滤路由，登陆成功跳转动态路由页面this.$router.push({path:'/page1/list'})正常，刷新就空白了
下面上代码：

在router.js中定义号常规路由和动态路由：

export const constantRouter = [
    {
        path: '/login',
        name: 'login',
        hidden: true,
        component: () => import('@/views/login')
    },

    {   path:'/home',
        name:'home',
        meta:{ title:'list',icon:''},
        component: () => import('@/views/home'),
    },
    { path: '/', redirect: '/login', hidden: true }
]

export default new Router({
    routes: constantRouter
})

export const asyncRouter = [
    {
        path: '/page1',
        component: layout,
        alwaysShow: true, // will always show the root menu
        name: 'page1',
        redirect: '/page1/list',
        meta:{ title:'list',icon:''},
        children: [
            {
                path: 'list',
                component: () => import('@/views/list'),
                name:'list',
                meta:{ title:'list',icon:''},
            },
            {
                path: 'edit',
                component: () => import('@/views/form'),
                name:'edit',
                hidden:true,
                meta:{ title:'edit',icon:''},
            },
            {
                path: 'detail',
                component: () => import('@/views/detail'),
                name:'detail',
                hidden:true,
                meta:{ title:'detail',icon:''},
            },
        ]
    },
    {
        path: '/page1',
        component: layout,
        name: 'page2',
        meta:{ title:'list',icon:''},
        children: [
            {
                path: '/test',
                component: () => import('@/views/test'),
                name:'test',
                meta:{ title:'test',icon:''},
            },
        ]

    },
    {   path:'*',
        name:'errorPage404',
        hidden: true,
        component: () => import('@/views/404'),
    }
]

之后在main.js中addRouter：

import router from './router'
router.beforeEach((to, from, next) => {
    if(to.path !== '/login'){
        if(sessionUtil.getItem('recombineRouters')){
            next()
        }else{

            let privileges = ['list','edit'];
            let permission_routes = routeUtil.GenerateRoutes(privileges);
            router.addRoutes(permission_routes);
            console.log(router);
            next({ ...to, replace: true })
        }
    }else{
        next();
    }
})

其中过滤动态路由的方法GenerateRoutes，我没有用vuex，只是写了个过滤路由的方法：

function GenerateRoutes(privileges){
    var f = item => {
        if(item.path === '*'){
            return true;
        }else{
            if(item.children && item.children.length > 0){
                item.children = item.children.filter(f);
                if(item.children.length>0){
                    item.redirect = item.children[0].path;
                    return true;
                }else{
                    return false;
                }
            }else{
                return (privileges.indexOf(item.name) > -1)
            }
        }
    }

    let accessedRouters = asyncRouter.filter(f);
    let recombineRouters = constantRouter.concat(accessedRouters);
    sessionUtil.setItem('recombineRouters',recombineRouters);
    return accessedRouters;
}

我的router是v3.0.1
首先，*（404）是写在动态路由之后的，
其次，addRouter后没有用next(),而是使用 next({ ...to, replace: true })代替
但是还是没有解决问题，求大神帮忙！

Answer 1

就问你个问题 你刷新后有执行添加路由的操作吗？
你动态添加的路由存在内存里面的 刷新就没了

Answer 2

多谢楼上解惑，一句话戳中问题根源，让我茅塞顿开。

下面我把这个问题总结记录下：

原理（问题根源）：addRouter动态添加的路由存在内存里面的（就像vue的根实例，axios的实例,router的实例），刷新就没了，所以刷新后必须要重新执行添加路由。

错误原因：我这里将session里是否有过滤后的路由作为判断是否addRouter的条件，但是刷新页面后session里的数据不会失去，所以刷新后不再执行addRouter。

解决方法：
1、如果保持以过滤路由是否存在作为判断，那过滤路由就不能存在session里，而是存在js的某个变量里（比如vux的state），使得刷新页面后一起重新来过。
2、或者定义个变量标记来判断：

let flag = 0
router.beforeEach((to, from, next) => {
    if(to.path !== '/login'){
        if(flag == 0){
            console.log(flag)
            let privileges = ['list','edit'];
            let permission_routes = routeUtil.GenerateRoutes(privileges);
            router.addRoutes(permission_routes);
            flag++
            next({ ...to, replace: true })
        }else{
            next()
        }
    }else{
        next();
    }
})

Answer 3

楼主我想问一个问题，假如我的动态路由是写死的
const constantRouterMap = [..........]

在路由守卫中直接执行下面这个代码。
`router.beforeEach((to, from, next) => {
window.console.log("testtestteststststst")
router.addRoutes(constantRouterMap)
next()
})`

为什么刷新还是会空白呢？按道理来说不是只要路由有过变化（刷新也算），路由守卫beforeEach就会执行的么？