動態路由

Vue後臺管理專案經常有許可權控制，不同角色使用不同許可權，常用方法就是用addRoute來動態新增路由

$router的addRoute 每次只能新增一個符合路由規則，但路由物件的children裡面可以有多個路由物件。

 const routeObj1 = {
    path: "/about",
    component: () =>import("../views/About.vue"),
    children: [
      {
        path: 'one',
        component: () =>import("../views/a.vue")
      },
      {
        path: '/about/two',
        component: () =>import("../views/ff.vue")
      }
    ]
  }

const routeObj2 ={
    path: "/S",
    component: () =>import("../views/powerS.vue")
  }

this.$router.addRoute(routeObj1)
this.$router.addRoute(routeObj2)
 

新增子路由

想要在about下動態新增子路由three，特別要注意新增的是子路由的path一定要把父路由的路徑也帶上

  this.$router.addRoute('about',{
    path: '/about/three',
    component: () =>import("../views/C.vue")
  })

重置路由

每次角色切換時，清除上一個角色路由，在新增新路由。 重新建立一個Newrouter，用新的newRouter.matcher覆蓋掉原來的router.matcher

// router.js 中
const routes= [] // 預設的路由規則，比如登入頁（非許可權頁）
const router = new VueRouter({
  mode: "hash",//hash 
  base: process.env.BASE_URL,
  routes,
});

// 切換角色時  重置路由
router.$addRoutes = (params) => {
  router.matcher = new VueRouter({ // 重置路由規則
    routes: routes
  }).matcher
  params.forEach((ele) => {
    router.addRoute(ele) // 新增路由
  })
}
 

重新整理頁面，動態新增的路由將會消失，提示404。但是 重新整理之後將會觸發一次onReady事件。

onReady事件，在頁面重新整理時(路由完成初始化)呼叫。重新整理之後 每次路由跳轉都會執行 beforeEach(全域性第一個路由守衛)和afterEach(全域性最後一個路由守衛)。 onReady在 afterEach觸發後才會執行， 且只調用一次。

// router.js 中

router.onReady(() => {
  //路由完成初始化時 呼叫
  const status = true // 判斷使用者已登入且已有許可權
  if (status) {
    // 可以使用  forEach（() => {}）
    router.addRoute({
      path: "*",
      component: () => import("@/views/sls.vue")
    })
  }
})

router.beforeEach((to, from, next) => { next() })
router.afterEach(() => { })

 

404頁面閃現的問題，如果404頁面在預設路由中，重新整理頁面動態路由正在載入時，頁面就會短暫的顯示404，解決方案就是，將404頁面放在動態路由中載入，即獲取動態路由後，push上404頁，這樣就完美解決了