element 动态路由详解

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)
    })
  }
}

就这么简单