vue 动态路由遇到的问题

312 阅读1分钟

背景:公司要求权限匹配自己的路由进行展示

1.使用vue的addRoutes不生效,需要赋值给路由在调用addRoutes()具体原因不清楚。

image.png

2.不同权限进入时展示的首页不一致怎么处理

首先判断是什么权限进入的,然后根据权限不同手动push一个 path: ‘/’的路由,并让他重定向到需要展示的首页

image.png

3.匹配之后报错页面不展示

image.png

image.png

怀疑是 JSON.parse(JSON.stringify(item))时compontent 深拷贝失败 改成Object.assign就好了
(因为要复制自己路由的所有属性所以要使用深拷贝)

1649905914(1).png

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. 最后

如果有什么不对的地方欢迎大家指出