vue 动态理由

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动态路由，百度能找到一大堆教程，此教程较为精简