此文章涉及根据后端返回路由列表进行动态路由的设置与添加
若需要涉及权限请 点击这里 查看权限路由设置,可结合使用
流程:
1:首先查看后端返回数据结构(若不好处理,直接特喵的让后端改[狗头]),
2.封装递归处理 component组件注入格式
3.使用递归函数并进行addRoute,注意是addRoute(addRouter已经是过去式了)
4.最后存储到vuex,方便后续使用
代码示例
1.模拟数据结构
routerList:[{
path: '/systemSettings',
title: '系统设置',
component:'/monitor/systemSettings/systemSettings',
meta: {
title: '系统设置',
icon: 'el-icon-mobile',
menuPermission: 'monitor'
},
children: [
{
path: '/LabelSettings',
title: '标签设置',
component:'/monitor/systemSettings/LabelSettings',
meta: {
title: '标签设置',
icon: 'el-icon-mobile',
menuPermission: 'monitor'
}
}, {
path: '/richTextSettings',
title: '富文本设置',
component:'/monitor/systemSettings/richTextSettings',
meta: {
title: '富文本设置',
icon: 'el-icon-mobile',
menuPermission: 'monitor'
}
}
]
},]
2.封装递归处理
//转换路由函数
const loadView = (view) => {
return (resolve) => require([`@/views${view}`], resolve)
}
let routerFun=(data)=>{
return data.filter(route => {
if (route.component) {
// console.log(route.component);
route.component = loadView(route.component)
}
// 如果有子路由,则采用递归的方式
if (route.children != null && route.children.length>0) {
route.children = routerFun(route.children)
}
return true
})
}
我是在login页面进行的处理,根据实际需求而定
3.动态添加路由
const arr=routerFun(this.routerList)
arr.push({ path: '*', redirect: '/404', hidden: true });
//存储到vuex
store.state.routerList=arr
//遍历注册路由
arr.forEach((item)=>{
router.addRoute('home',item)
})
废话!
我也仅是一个普普通通的前端工作者,有任何细节方面问题,可在评论区指导。
虚心接受,努力提升自己正是我们最好的状态
希望对你能有所帮助