先说明下router这个实例对象下的addRoutes方法:这个方法传入一个数组,其实就是一个新的路由表单,它不会覆盖掉原来旧的路由表单,而是采用合并的原则,类似于React中的setState方法;
// 后台返回的菜单数据
let menuList = [
{
text: '首页',
url: '/main',
children: []
}, {
text: '采购管理',
url: '/purchase',
children: [
{
text: '分供方管理',
url: '/supplier',
children: [
{
text: '潜在供应商',
url: '/supplier/potentialSupplier',
children: []
},
{
text: '供应商名录',
url: '/supplier/supplierResources',
children: []
}
]
}
]
}
]
// 静态路由表单
let router = [
{
path: '/',
meta: { title: '布局' },
component: () => import('@/layout/Index'),
children: []
},
{
path: '*',
meta: { title: '404' },
component: () => import('@/404'),
}
]
function getMenuList() {
// const rightList = $store.state.menuList // 从vuex或者本地获取菜单数据,这里是menuList
// const currentRoutes=router.options.routes // 获取路由中的静态路由表单,这里是router
let res = getRouterData(menuList, router[0].children)
router.addRoutes(router) // 与旧的路由表单采用合并原则,重新挂载路由
}
// 递归生成路由表单
function getRouterData(menuList, arr) {
menuList.forEach(item => {
let obj = {
path: item.url,
meta: { title: item.text },
component: `@/views${item.url}/Index`,
children: []
}
arr.push(obj)
if (item.children.length != 0) {
getRouterData(item.children, obj.children)
}
})
return router[0].children
}
getMenuList()
console.log("动态生成的路由表单", router);
以上只是一个demo,router.addRoutes方法在这里是不能用的,因为没有router实例,只是方便大家理解,具体还是应用在vue项目中