H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

我想用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 })代替
但是还是没有解决问题,求大神帮忙!

回答:

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

回答:

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

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

原理(问题根源):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();
    }
})

本文地址:H5W3 » vue-router addRouter添加动态路由,第一次跳转正常,刷新后变空白?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址