简述：动态路由就是在页面进行配置菜单，菜单配置的是已经存在的页面，根据角色来进行权限控制菜单的显示，然后根据配置用户来进行选择什么角色，角色可以选择多个。这样登录之后根据用户得到的角色菜单返回相应数据，前端进行增加展示。
获取动态路由：后端数据返回
const actions = {
generateRoutes({ commit }, userId) {
return new Promise(resolve => {
getUserMenu({loginCode:userId}).then(response => {
let routerArr = response.msg.children;
// 这里asyncRouter可以是let asyncRouter =[]；404放在固定的路由里面。
let asyncRouter = [
{ path: '*', redirect: '/404', hidden: true }
];
routerArr.forEach((value,index)=>{
let firstObj = {
path: index==0?'/':value.url,
component: Layout,
redirect: value.children[0].url,
name: value.perms,
meta: { title: value.text, icon: value.icon },
children:[],
}
if(value.children.length>0){
value.children.forEach((val,ind)=>{
let menuObj = {
path: val.url,
name: val.perms,
component: () => import(`@/views${val.url}`),
meta: { title: val.text, icon: val.icon,per:[]}
};
// 这里是判断是否存在页面按钮的权限控制
if(val.children.length>0){
val.children.forEach((v,i)=>{
menuObj.meta.per.push(v.perms);
})
}
firstObj.children.push(menuObj);
})
}
//将遍历好的push到路由数组中
asyncRouter.push(firstObj);
})
commit('SET_ROUTES',constantRoutes.concat(asyncRouter))
resolve(asyncRouter)
}).catch(error => {
// reject(error)
})
})
}
}
在router.beforeEach中进行调用获取动态路由，然后将路由放进router.addRoutes
菜单页面的新增和展示和编辑。
