我想用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 })代替
但是还是没有解决问题,求大神帮忙!
就问你个问题 你刷新后有执行添加路由的操作吗?
你动态添加的路由存在内存里面的 刷新就没了