vue-router中动态添加路由问题

Abbotton
  • 227

简述

最近在研究前后台分离下基于RBAC的权限控制问题,在使用vue-router动态添加路由的时候,出现一个小问题,需要请教下各位.

大概思路如下:

  • 后台用户登录成功以后,从服务端获取该用户对应的权限列表,并存入sessionStorage中

  • 将用户重定向到后台首页

  • 在router.beforeEach()钩子中,将sessionStorage中的权限列表数据读入,并调用router.addRoutes()动态添加路由.

代码

    router.beforeEach(to, from, next)
    {
        ...
        let permission = JSON.parse(window.sessionStorage.getItem('permission'))
        /*permission = [...{"client_route":"/test"}...]*/
        if (permission) {
            let newRoutes = []
            permission.map((item, index) => {
                newRoutes.push({
                    path:'${item.client_route}', 
                    component: '../view${item.client_route.slice(1)}.vue',
                    meta:{Auth:true}
                })
            })
            router.addRoutes(newRoutes)
        }
        ...
    }

问题来啦

  1. 思路是否有问题?

  2. 上面的代码有问题,path和component这里的${}不知道该怎么处理.原谅我es6学的不好.╮(︶﹏︶")╭.我的本意是根据返回来的路由名称去加载.vue文件

谢谢各位

回复
阅读 4.6k
5 个回答

es6里面用${}外面是反引号``,你的是单引号'',所以赋值失败

寥若晨星
  • 5
新手上路,请多包涵

component能用字符串?好神奇啊。回头试试

楼主从后台获取路由数据,这样是不是需要跟后台约定好数据格式

route['component'] = resolve => require([@/views/${url}], resolve)

url为组件vue的名称 xxxx.vue

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏