在這裡我們將會實現一個vue動態路由的案列，當使用者登陸成功後，根據使用者的角色，拿到他對應的選單資訊，並將它動態的載入到我們的路由中。

我們的通用的後臺管理系統中，我們會根據許可權的粗細不同，會對每個角色每個許可權每個資源進行控制。同樣的我們也需要實現一個這樣的功能。 這篇文章我將主要講vue端的實現，關於後臺介面我就不會涉及，當我接觸的時候我們的後臺介面是springcloud實現。

一、思路

在vue-router物件中首先初始化公共路由，比如（404，login）等，然後在使用者登陸成功，根據使用者的角色資訊，獲取對應許可權選單資訊menuList，並將後臺返回的menuList轉換成我們需要的router資料結構，然後通過vue-router2.2新添的router.addRouter(routes)方法，同時我們可以將轉後的路由資訊儲存於vuex，這樣我們可以在我們的SideBar元件中獲取我們的全部路由資訊，並且渲染我們的左側選單欄，讓動態路由實現。

二、實現

1、公共路由定義

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'

export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },
]
export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

2、獲取選單資訊

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
    } else {
      if (store.getters.roles.length === 0) { // 判斷當前使用者是否已拉取完user_info資訊
        store.dispatch('GetInfo').then(res => { // 拉取user_info
         const roles = res.roles
          store.dispatch("GetMenu").then(data => {
            initMenu(router, data);
          });
          next()
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || 'Verification failed, please login again')
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登入白名單，直接進入
      next()
    } else {
      next('/login') // 否則全部重定向到登入頁
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})

在這裡 我們通過在router的beforeEach鉤子函式 判斷使用者是否已經獲得角色資訊，如果沒有，則請求後臺獲取對應的角色資訊，然後通過角色資訊再次請求獲取對應的選單列表，獲取到選單列表，然後去格式化選單列表，使其轉換成router陣列的結構。

3、動態載入路由

import store from '../store'

export const initMenu = (router, menu) => {
  if (menu.length === 0) {
    return
  }
  let menus = formatRoutes(menu);
  // 最後新增
  let unfound = { path: '*', redirect: '/404', hidden: true }
  menus.push(unfound)
  router.addRoutes(menus)
  store.commit('ADD_ROUTERS',menus)
}

export const formatRoutes = (aMenu) => {
  const aRouter = []
  aMenu.forEach(oMenu => {
    const {
      path,
      component,
      name,
      icon,
      childrens
    } = oMenu
    if (!validatenull(component)) {
      let filePath;
      const oRouter = {
        path: path,
        component(resolve) {
          let componentPath = ''
          if (component === 'Layout') {
            require(['../views/layout/Layout'], resolve)
            return
          } else {
            componentPath = component
          }
          require([`../${componentPath}.vue`], resolve)
        },
        name: name,
        icon: icon,
        children: validatenull(childrens) ? [] : formatRoutes(childrens)
      }
      aRouter.push(oRouter)
    }

  })
  return aRouter
}

在這裡我們把menList轉換成routerList因為我們後臺返回的資料不是規範的router結構，所以這裡需要我們處理一下，如果你們後臺返回規範的就不需要處理，然後通過router.addRoutes把後臺返回的加入到我們的路由中，並且將其儲存在我們的vuex中，需要主要的 如果404元件一定要放在動態路由在後載入。

4、渲染選單

其實這裡已經不屬於我們的所講的重點，在這裡只需要取出上一步存在vuex中的路由資訊，並且將其渲染成我們的左側選單欄就可以。在這裡我們使用了element-ui。

<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <el-menu
      mode="vertical"
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import { validatenull } from "@/utils/validate";
import { initMenu } from "@/utils/util";

export default {
  components: { SidebarItem },
  created() {
  },
  computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar',
      'addRouters'
    ]),
    isCollapse() {
      return !this.sidebar.opened
    }
  }
}
</script>

就這樣我們動態載入路由就是實現了，是不是很簡單，關鍵點就是router.addRoute方法。下面我就說一下防踩坑點。

三、防坑

1、關於載入選單資訊的時機

在此之前我將第二步獲取選單資訊放在我的SideBar元件的create函式中，當時我發現也沒有什麼問題。登入跳轉到home介面 左側選單也成功渲染，點選選單進入我們動態載入的路由介面，也沒問題。但是當我點選重新整理的時候問題來。頁面空白 控制檯也不報錯。當時我就矇蔽了，什麼情況，不是好好的嘛？如果大家也遇到這種這時候大家不要著急，冷靜的分析整個流程，就會發現問題的所在。

1、登陸成功跳轉home介面，home元件是公共路由，存在的沒問題。

2、這時候 sidebar元件create鉤子觸發，成功獲取選單列表

3、選單列表轉成路由陣列，並且載入到router例項中和vuex中

4、sidebar從vuex獲取到路由陣列渲染選單 進入我們動態載入頁面中，顯示正常，這一切看起來沒什麼問題

5、點選瀏覽器的重新整理按鈕、或者F5，頁面空白。

原因： 第五步中我們我們瀏覽器重新整理，在spa應用整個vue例項會重新載入，也是說我的vue-router會重新初始化，那麼我們之前的動態addRoute就不存在了，但是我們此時訪問一個不存在的頁面，所以我們的sidebar元件也就不會被訪問，那麼也無法獲取選單資訊，就導致頁面空白。所以我們需要把載入選單資訊這一步放在router的全域性守衛beforeEach中就可以了。

2、關於404元件的位置

大家可以看到

export const initMenu = (router, menu) => {
  if (menu.length === 0) {
    return
  }
  let menus = formatRoutes(menu);
  // 最後新增
  let unfound = { path: '*', redirect: '/404', hidden: true }
  menus.push(unfound)
  router.addRoutes(menus)
  store.commit('ADD_ROUTERS',menus)
}

我強調了 404元件一定要放在動態路由元件的最後，不然你重新整理動態載入的頁面，會跳轉到404頁面的。

四、效果圖

我的部落格即將搬運同步至騰訊雲+社群，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=kbchhlnyo816