关于网友提出的“ (vue.js)vue-router中动态添加路由问题”问题疑问,本网通过在网上对“ (vue.js)vue-router中动态添加路由问题”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:
问题: (vue.js)vue-router中动态添加路由问题
描述:简述
最近在研究前后台分离下基于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)
}
...
}
问题来啦
思路是否有问题?
上面的代码有问题,path和component这里的${}
不知道该怎么处理.原谅我es6学的不好.╮(︶﹏︶")╭.我的本意是根据返回来的路由名称去加载.vue
文件
谢谢各位
解决方案1:es6里面用${}外面是反引号`
`,你的是单引号''
,所以赋值失败
以上介绍了“ (vue.js)vue-router中动态添加路由问题”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4290383.html