谈谈 动态路由
简述：动态路由就是在页面进行配置菜单，菜单配置的是已经存在的页面，根据角色来进行权限控制菜单的显示，然后根据配置用户来进行选择什么角色，角色可以选择多个。这样登录之后根据用户得到的角色菜单返回相应数据，前端进行增加展示。
获取动态路由：后端数据返回
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
菜单页面的新增和展示和编辑。
菜单即动态路由所在的页面
后端返回一级二级三级菜单数据，这里就是动态路由获取的数据接口
角色-管理员设置时候，下面是传给后端各个菜单页面的标识ID,这个新增菜单时候固定了新增接口返回
传送给后端，menuId就是菜单ID，再菜单页面也可以看到
注意一个用户多个角色
这个是控制按钮是否显示
直接从路由中得到这个控制按钮的值，因为按钮的值是存在了meta中。
