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