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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容