vue-router中的導航鈎子

vue-router中的鈎子有三種

1. 全局導航鈎子
2. 路由中配置的單個導航鈎子
3. 元件内部的導航鈎子

這三種鈎子函數的參數用法一樣

參數介紹

• to:router即将進入的路由對象
• from:目前導航即将離開的路由
• next:Function,進行管道中的一個鈎子，如果執行完了，則導航的狀态就是 confirmed （确認的）；否則為false，終止導航

一，全局的導航鈎子

   全局的導航鈎子有兩種

// 點選導航前調用
router.beforeEach((to, from, next) => {
  // ...
})
// 點選導航後調用
router.afterEach(route => {
  // ...
})
           

  router.beforeEach用在項目中（執行個體一）

 1,用beforeEach為了實作在每個頁面中擷取路由中的meta.title 的值，顯示在頁面中（router/index.js檔案）

{
            path: '/element/business',// 商業中心幫助頁面
            name: 'business',
            component: business,
            meta: { title: '商業幫助中心' }
        }
           

2，動态改變每個頁面title 屬性

/**
 * 導航全局前置守衛
 * 用于檢測router變化時改變頁面title
 */
router.beforeEach((to, from, next) => {
    // 動态改變頁面title屬性
    document.title = to.meta.title ? to.meta.title : '元件設定';
    next();
})
           

  router.beforeEach作為攔截器用在項目中（執行個體二）

beforeEach有攔截器的功能 ，可以做全局校驗如果有權限問題可以跳到指定的頁面

//使用鈎子函數對路由進行權限跳轉
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
// 如果是管理者權限則可進入，這裡隻是簡單的模拟管理者權限而已
role === 'admin' ? next() : next('/403');
}else{
next();
}
}
})
           

  router.afterEach這個全局鈎子函數，暫時沒有用到，在項目中用到時會進行補充

二，路由中配置的單個導航鈎子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeEnter: (route) => {
        // ...
      }
    }
  ]
});
           

單個導航鈎子暫時沒有用到，在項目中用到時會進行補充

三，元件内部的導航鈎子

元件内部的導航鈎子有三種

beforeRouteEnter 

beforeRouteUpdate (2.2 新增) 

beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前調用
    // 不！能！擷取元件執行個體 `this`
    // 因為當鈎子執行前，元件執行個體還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在目前路由改變，但是該元件被複用時調用
    // 舉例來說，對于一個帶有動态參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 元件，是以元件執行個體會被複用。而這個鈎子就會在這個情況下被調用。
    // 可以通路元件執行個體 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時調用
    // 可以通路元件執行個體 `this`
  }
}
           

router.beforeRouteLeave用在項目中（執行個體一）

要求：

a,b,c 三個頁面

b頁面調到a頁面，需要a頁面進行緩存，

c頁面調到a頁面，a頁面不需要緩存

思路：通過beforeRouterLeave這個鈎子來對路由裡面的keepAlive進行指派。進而動态的确定A頁面是否需要被緩存。