学习vue也有一段时间了,这段时间也遇到了不少问题,趁着有时间来复习总结一下。
动态路由在vue中的使用时非常常见的,就是根据不同的角色信息从数据库中获得不同的数据库导入路由表,实现权限控制以及动态菜单显示等效果。
步骤如下:
- 在导航守卫处判断是否已加载路由
- 未加载则读取后端数据,同时存入vuex状态
- 已加载则继续下个界面的跳转
首先就是后端的读取,读取数据如下:
我开始本来是准备直接读入后端数组添加进行路由表,但是报异常了,component不可为string,修改一遍后,
在登录成功跳转的时候却报错了,显示的是 can not find module ‘xxx’,特别奇怪,因为从模块名xxx可知,它名称的读取是成功的,但是似乎并不能成功的解析这个模块,后来网上查了很久也没解决,偶然看见了别人读取component时对解析地址进行了多一步的修改。
就是使用for循环拆开各个路径再在前端重新拼起来,结果一试发现居然成功了。
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
addDynamicMenuAndRoutes()
next()
})
function addDynamicMenuAndRoutes() {
var roleid = null
if(store.state.user.user){
roleid = store.state.user.user.role.id
}
var request = {roleid:roleid}
api.menu.getRoutersByRoleid(request)
.then( (res) => {
var dynamicRoutes = addDynamicRoutes(res.data)
router.options.routes = router.options.routes.concat(dynamicRoutes)
router.addRoutes(router.options.routes)
})
.catch(function(res) {
alert(res);
});
}
function addDynamicRoutes (menuList=[]) {
var routes1 = []
// 第一层
for(var i = 0;i < menuList.length;i++){
let array = menuList[i].path.split('/')
let url = ''
for(let i = 0;i<array.length;i++){
if(i == 0){
continue
}
if(i==(array.length-1)){
url = url + '/' + array[i].substring(0,1).toUpperCase()+array[i].substring(1)
}else{
url = url + '/'+ array[i]
}
}
var router1 = {
path: menuList[i].path,
component: resolve => require([`@/views${url}`], resolve),
name: menuList[i].name,
redirect: menuList[i].children[0].path,
children:[]
}
if(menuList[i].children){
var routes2 = []
// 第二层
for(var j = 0;j<menuList[i].children.length;j++){
let array = menuList[i].children[j].path.split('/')
let url =''
for(let i = 0;i<array.length;i++){
if(i == 0){
continue
}
if(i==(array.length-1)){
url = url + '/' + array[i].substring(0,1).toUpperCase()+array[i].substring(1)
}else{
url = url + '/'+ array[i]
}
}
//const component1 = menuList[i].children[j].component
var router2 = {
path: menuList[i].children[j].path,
component: resolve => require([`@/views${url}`], resolve),
name: menuList[i].children[j].name
}
routes2.push(router2)
}
router1.children = routes2
}
routes1.push(router1)
}
return routes1
}
这个地方的疑问我也没搞清楚,感觉应该是前后端数据格式上是有差异的,不能直接解析(但是感觉不应该)。