这里写自定义目录标题
element 动态路由详解和坑
近期需要用element 开发,并能对菜单进行动态管控。所以开始对element 动态路由进行研究
element集成了mock
element 集成了mock,mock中有动态路由数组所以不用自己生成了。
配置路由的关键方法
src下的permission.js
生成路由
路由封装
修改store下的permission中的filterAsyncRouter方法
//路由封账方法
export function filterAsyncRouter(asyncRoutes) {
const accessedRouters = asyncRoutes.filter(route => {
if (route.component) {
if (route.component === 'layout/Layout') {
route.component = Layout
} else {
//重点
const value = route.component
route.component = function component(resolve) {
require(['@/views/' + value], resolve)
}
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
//返回封装好的路由
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const list = filterAsyncRouter(asyncRoutes) //直接添加到路由中(如果有角色校验则根据角色筛选)
commit('SET_ROUTES', list)
resolve(state.routes)
})
}
}
就这么简单