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

就這麼簡單