思路 ：

動態路由實現:在導航守衛中判斷用戶是否有用戶信息， 通過調用接口，拿到后臺根據用戶角色生成的菜單樹， 格式化菜單樹結構信息并遞歸生成層級路由表并 使用Vuex保存，通過  router.addRoutes  動態掛載到  router  上，按鈕級別的權限控制,則需使用自定義指令去實現。

實現：

導航守衛代碼：

router.beforeEach((to, from, next) => { NProgress.start() // start progress bar to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`)) if (getStore('ACCESS_TOKEN')) { /* has token */ if (to.path === '/user/login') {  next({ path: '/other/list/user-list' })  NProgress.done() } else {  if (store.getters.roles.length === 0) {  store   .dispatch('GetInfo')   .then(res => {   const username = res.principal.username   store.dispatch('GenerateRoutes', { username }).then(() => {    // 根據roles生成可訪問的路由表    // 動態添加可訪問路由表    router.addRoutes(store.getters.addRouters)    const redirect = decodeURIComponent(from.query.redirect || to.path)    if (to.path === redirect) {    // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record    next({ ...to, replace: true })    } else {    // 跳轉到目的路由    next({ path: redirect })    }   })   })   .catch(() => {   notification.error({    message: '錯誤',    description: '請求用戶信息失敗，請重試'   })   store.dispatch('Logout').then(() => {    next({ path: '/user/login', query: { redirect: to.fullPath } })   })   })  } else {  next()  } } } else { if (whiteList.includes(to.name)) {  // 在免登錄白名單，直接進入  next() } else {  next({ path: '/user/login', query: { redirect: to.fullPath } })  NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it } }})

Vuex保存routers

const permission = { state: { routers: constantRouterMap, addRouters: [] }, mutations: { SET_ROUTERS: (state, routers) => {  state.addRouters = routers  state.routers = constantRouterMap.concat(routers) } }, actions: { GenerateRoutes ({ commit }, data) {  return new Promise(resolve => {  generatorDynamicRouter(data).then(routers => {   commit('SET_ROUTERS', routers)   resolve()  })  }) } }}

路由工具，訪問后端接口獲得菜單樹，然后對菜單樹進行處理，把菜單樹的組件字符串進行轉換為前端的組件如：

userlist: () => import('@/views/other/UserList')，這樣生成的路由就是我們所要的了。

import { axios } from '@/utils/request'import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'// 前端路由表const constantRouterComponents = { // 基礎頁面 layout 必須引入 BasicLayout: BasicLayout, BlankLayout: BlankLayout, RouteView: RouteView, PageView: PageView, // 需要動態引入的頁面組件 analysis: () => import('@/views/dashboard/Analysis'), workplace: () => import('@/views/dashboard/Workplace'), monitor: () => import('@/views/dashboard/Monitor'), userlist: () => import('@/views/other/UserList') // ...more}// 前端未找到頁面路由（固定不用改）const notFoundRouter = { path: '*', redirect: '/404', hidden: true}/** * 獲取后端路由信息的 axios API * @returns {Promise} */export const getRouterByUser = (parameter) => { return axios({ url: '/menu/' + parameter.username, method: 'get' })}/** * 獲取路由菜單信息 * * 1. 調用 getRouterByUser() 訪問后端接口獲得路由結構數組 * 2. 調用 * @returns {Promise<any>} */export const generatorDynamicRouter = (data) => { return new Promise((resolve, reject) => { // ajax getRouterByUser(data).then(res => {  // const result = res.result  const routers = generator(res)  routers.push(notFoundRouter)  resolve(routers) }).catch(err => {  reject(err) }) })}/** * 格式化 后端 結構信息并遞歸生成層級路由表 * * @param routerMap * @param parent * @returns {*} */export const generator = (routerMap, parent) => { return routerMap.map(item => { const currentRouter = {  // 路由地址 動態拼接生成如 /dashboard/workplace  path: `${item && item.path || ''}`,  // 路由名稱，建議唯一  name: item.name || item.key || '',  // 該路由對應頁面的 組件  component: constantRouterComponents[item.component || item.key],  // meta: 頁面標題, 菜單圖標, 頁面權限(供指令權限用，可去掉)  meta: { title: item.name, icon: item.icon || undefined, permission: item.key && [ item.key ] || null } } // 為了防止出現后端返回結果不規范，處理有可能出現拼接出兩個 反斜杠 currentRouter.path = currentRouter.path.replace('//', '/') // 重定向 item.redirect && (currentRouter.redirect = item.redirect) // 是否有子菜單，并遞歸處理 if (item.children && item.children.length > 0) {  // Recursion  currentRouter.children = generator(item.children, currentRouter) } return currentRouter })}