背景:公司要求权限匹配自己的路由进行展示
1.使用vue的addRoutes不生效,需要赋值给路由在调用addRoutes()具体原因不清楚。
2.不同权限进入时展示的首页不一致怎么处理
首先判断是什么权限进入的,然后根据权限不同手动push一个 path: ‘/’的路由,并让他重定向到需要展示的首页
3.匹配之后报错页面不展示
怀疑是 JSON.parse(JSON.stringify(item))时compontent 深拷贝失败 改成Object.assign就好了
(因为要复制自己路由的所有属性所以要使用深拷贝)
4.缓存
后来发现 当前用户推出之后登录其他权限账户时(不刷新页面),首页竟然是上一位的路由首页。
看网上的代码太麻烦了,偷个懒,在退出时调用location.reload()
5.递归匹配
let arr = [{
path: '/',
children: [{
path: 'home'
}, {
path: 'home1'
}]
}, {
path: '/one',
children: [{
path: 'one'
}]
},]
let arr1 = [{
path: '/',
}, {
path: '/one',
children: [{
path: 'one'
}, {
path: 'one1'
}]
},]
function returnRoutes (a, b) {
let routes = []
for (const item of a) {
for (const ite of b) {
if (item.path == ite.path) {
let route = Object.assign({}, item);
if (ite.children?.length > 0) {
route.children = returnRoutes(item.children, ite.children)
} else {
delete route.children
}
routes.push(route)
}
}
}
return routes
}
console.log(returnRoutes(arr, arr1));
6. 最后
如果有什么不对的地方欢迎大家指出