1、概念

動態添加 vue-router 路由規則。經典使用場景：根據當前登錄用戶權限進行路由規則的添加。詳見 vue-router文檔。

2、代碼

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({ routes: [] })

const addRoute = async () => {
  await new Promise((resolve)=> setTimeout(resolve, 500)) //模擬異步請求
  const isAdmin = false //模擬后端數據，為簡化邏輯，這里以 isAdmin 判斷條件為例
  const viewName = isAdmin ? 'page-a.vue':'page-b.vue'

  //添加一條新路由規則
  router.addRoute({
    path: '/page-all',
    component: () => import(`./views/${viewName}`)
  })
}

let addedRoute = false //是否已成功獲取后端數據且根據后端數據添加了新的路由規則

router.beforeEach(async (to, from, next) => {
  if (addedRoute) {
    next()
  } else {
    await addRoute()  //根據后端數據添加路由規則
    addedRoute = true
    //在異步添加路由規則后，如果不加參數直接調用 next() 是匹配不到任何路由規則的
    next({
      path: to.path,
      replace: true //導航后不會留下 history 記錄。
    })
  }
})

export default router

3、后話

兩年前面試官問過我這個問題。面試官：知道動態路由嗎？我：你指的是懶加載？。他說不是，我被KO了。百度vue動態路由后才知道不就是vue-router的實例方法addRoute嘛！因為在實際開發中幾乎不會用到addRoute，一般都是注冊全部路由規則，然后在導航守衛中進行攔截處理。
對于vue動態路由，百度能找到一大堆教程，此教程較為精簡