这个章节知识点不多，但是很绕，而且我觉得不是最优雅的写法，如果有更好的方法请给我留言
参考文章
简单分析
主要利用 router.addRoutes([]) //传入数组
global.antRouter = menus //赋值全局变量
Siderbar/index return this.$router.options.routes.concat(global.antRouter) //路由合并
到此就完成了
通过permission.js开始获取权限管理
- await store.dispatch('user/getInfo')
- store/modules/user.js //这里通过vuex发起请求
- 此时getinfo包含改用户的权限信息
- 后端返回数据即可，前端处理成符合菜单的格式
- 存入到store中
function toTreeData(data,pid){
function tree(id) {
let arr = []
data.filter(item => {
return item.id_parentauth === id;
}).forEach(item => {
// console.log(item.href)
let jsonpath = {
path: item.href,
name: item.name,
meta:{title:item.name, icon: item.icon},
children: tree(item.id_auth)
}
if(!Boolean(item.id_parentauth)){
jsonpath.component = Layout
// jsonpath.redirect = '/example/table'
}else {
//解决import无法导入的问题
jsonpath.component = (resolve) => require([`@/views/${item.href}/index`], resolve)
}
arr.push(jsonpath)
})
return arr
}
return tree(pid) // 第一级节点的父id，是null或者0，视情况传入
}
最后一步获取vuex的menu并放入addRouters
- const menus = store.getters.menus
- router.addRoutes(menus) // 2.动态添加路由
- global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
- 合并路由 this.$router.options.routes.concat(global.antRouter) //路由合并
