vue-element-admin

前置要點 每頁都要有name

1. 修改 src\store\modules\permission.js

1.添加兩個方法

/**
 * 生成扁平化機構路由(僅兩級結構)
 * @param {允許訪問的路由Tree} accessRoutes
 * 路由基本機構:
 * {
 *   name: String,
 *   path: String,
 *   component: Component,
 *   redirect: String,
 *   children: [
 *   ]
 * }
 */
function generateFlatRoutes(accessRoutes) {
  const flatRoutes = []

  for (const item of accessRoutes) {
    let childrenFflatRoutes = []
    if (item.children && item.children.length > 0) {
      childrenFflatRoutes = castToFlatRoute(item.children, '')
    }

    // 一級路由是布局路由,需要處理的只是其子路由數據
    flatRoutes.push({
      name: item.name,
      path: item.path,
      component: item.component,
      redirect: item.redirect,
      children: childrenFflatRoutes
    })
  }

  return flatRoutes
}
/**
 * 將子路由轉換為扁平化路由數組（僅一級）
 * @param {待轉換的子路由數組} routes
 * @param {父級路由路徑} parentPath
 */
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
  for (const item of routes) {
    if (item.children && item.children.length > 0) {
      if (item.redirect && item.redirect !== 'noRedirect') {
        flatRoutes.push({
          name: item.name,
          path: (parentPath + '/' + item.path).substring(1),
          redirect: item.redirect,
          meta: item.meta
        })
      }
      castToFlatRoute(item.children, parentPath + '/' + item.path, flatRoutes)
    } else {
      flatRoutes.push({
        name: item.name,
        path: (parentPath + '/' + item.path).substring(1),
        component: item.component,
        meta: item.meta
      })
    }
  }

  return flatRoutes
}

2.修改actions

  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      // let accessedRoutes
      // if (roles.includes('admin')) {
      //   accessedRoutes = asyncRoutes || []
      // } else {
      //   accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      // }
      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      // 重點修改  下邊
      const flatRoutes = generateFlatRoutes(accessedRoutes)
      commit('SET_ROUTES', accessedRoutes)
      resolve(flatRoutes)
    })
  }

2.src\permission.js

          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          // 下邊修改接參變量命名 與 返回變量名一致 不至于理解混亂
          const flatRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
          router.addRoutes(flatRoutes)

el-admin 2.5前的版本

1.src\router\index.js

1. 添加兩個方法 (同上邊vue-element-admin所添加的方法是一樣的，只是添加文件不一樣)

/**
 * 生成扁平化機構路由(僅兩級結構)
 * @param {允許訪問的路由Tree} accessRoutes
 * 路由基本機構:
 * {
 *   name: String,
 *   path: String,
 *   component: Component,
 *   redirect: String,
 *   children: [
 *   ]
 * }
 */
function generateFlatRoutes(accessRoutes) {
  const flatRoutes = []

  for (const item of accessRoutes) {
    let childrenFflatRoutes = []
    if (item.children && item.children.length > 0) {
      childrenFflatRoutes = castToFlatRoute(item.children, '')
    }

    // 一級路由是布局路由,需要處理的只是其子路由數據
    flatRoutes.push({
      name: item.name,
      path: item.path,
      component: item.component,
      redirect: item.redirect,
      children: childrenFflatRoutes
    })
  }

  return flatRoutes
}
/**
 * 將子路由轉換為扁平化路由數組（僅一級）
 * @param {待轉換的子路由數組} routes
 * @param {父級路由路徑} parentPath
 */
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
  for (const item of routes) {
    if (item.children && item.children.length > 0) {
      if (item.redirect && item.redirect !== 'noRedirect') {
        flatRoutes.push({
          name: item.name,
          path: (parentPath + '/' + item.path).substring(1),
          redirect: item.redirect,
          meta: item.meta
        })
      }
      castToFlatRoute(item.children, parentPath + '/' + item.path, flatRoutes)
    } else {
      flatRoutes.push({
        name: item.name,
        path: (parentPath + '/' + item.path).substring(1),
        component: item.component,
        meta: item.meta
      })
    }
  }

  return flatRoutes
}

2.修改loadMenus 方法

export const loadMenus = (next, to) => {
  buildMenus().then(res => {
    const asyncRouter = filterAsyncRouter(res)
    const flatRoutes = generateFlatRoutes(asyncRouter)
    asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
    store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存儲路由
      router.addRoutes(flatRoutes) // 動態(tài)添加可訪問路由表
      next({ ...to, replace: true })
    })
  })
}

以上方法 親測可用