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動態路由,百度能找到一大堆教程,此教程較為精簡