动态路由为了解决路由权限的问题,指每个用户登录返回的菜单都不一样,自己写的静态路由无法保证新增或者删除。动态路由解决这些问题,也避免了重复维护。
首先因为登陆成功后会返回路由数据,因为不确定是几层,所以要封装一个方法去调用,然后用深度递归的方式去找到数据,并且转换成路由所需要的格式然后存到一个空数组中,导出空数组
方法可以放在utils公共方法里,或者自己能找得到的地方。
//动态路由核心-把后端树状结构转成列表结构
export function fn(data) {
let arr = []
function deep(data) {
data.forEach(item => {
if (item.children.length) {
//递归开始
deep(item.children)
} else {
//把路径变成自己本地的名字
let path=item.path.slice(0,1).toUpperCase()+item.path.slice(1)
// console.log('首字母大写',path);
arr.push({
path: "/" + item.path,
name: item.path,
component: () => import (`@/views/list/${path}.vue`)
// component: (resolve) => require([`@/views/${item.path}.vue`], resolve)
})
}
})
}
deep(data)
return arr
}
在路由页面中引入方法,并且进行判断 ,如果登录成功并且有返回的路由数据的话则进行动态添加
import {fn} from '@/utils/routeList.js' //把生成列表路由放到公共方法里
// //生成动态路由-登录后获取到路由列表,调用递归函数通过router.addRoute('组件名',值)生成动态路由
console.log('路由先走');
function loadRoute() {
let token = localStorage.getItem('token')
let menusList=JSON.parse(localStorage.getItem('menusList'))
//注意此处是登录后,有了左侧导航数据,再进行路由表动态加载
if (token && menusList) {
let newList = fn(menusList)
console.log('路由表结构',newList);
newList.forEach(item => {
//利用核心方法addrouter进行路由添加,两个参数分别是要添加到的路由下,和添加什么
router.addRoute("Home", item)
})
}
}
//!!!注意此处在次调用1次动态路由,为了防止登录后跳转其它页面,刷新页面找不到问题。第2点注意,要在路由实例化后调用执行。
loadRoute()