Vue router的鉤子函數

Vue router的鉤子函數
在路由跳轉的時候，我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鉤子函數。

定義：路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的函數。
總體來講vue裏面提供了三大類鉤子，兩種函數
1、全局鉤子
2、某個路由的鉤子
3、組件內鉤子

兩種函數：
1、Vue.beforeEach(function(to,form,next){}) /在跳轉之前執行/
2、Vue.afterEach(function(to,form))/在跳轉之後判斷/

全局鉤子函數

它是對全局有效的一個函數

router.beforeEach((to, from, next) => {
    let token = router.app.$storage.fetch("token");
    let needAuth = to.matched.some(item => item.meta.login);
    if(!token && needAuth) return next({path: "/login"});
    next();
});

beforeEach函數有三個參數：

• to:router即將進入的路由對象
• from:當前導航即將離開的路由
• next:Function,進行管道中的一個鉤子，如果執行完了，則導航的狀態就是 confirmed
  （確認的）；否則爲false，終止導航。

afterEach函數不用傳next()函數

某個路由的鉤子函數

它是寫在某個路由裏頭的函數，本質上跟組件內函數沒有區別。

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

路由組件的鉤子

在子組件中調用路由的鉤子函數時無效的。
在官方文檔上是這樣定義的：

可以在路由組件內直接定義以下路由導航鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

這裏簡單說下鉤子函數的用法：它是和data,methods平級的。

 {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染該組件的對應路由被 confirm 前調用
  // 不！能！獲取組件實例 `this`
  // 因爲當守衛執行前，組件實例還沒被創建
 },
 beforeRouteUpdate (to, from, next) {
  // 在當前路由改變，但是該組件被複用時調用
  // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
  // 由於會渲染同樣的 Foo 組件，因此組件實例會被複用。而這個鉤子就會在這個情況下被調用。
  // 可以訪問組件實例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 導航離開該組件的對應路由時調用
  // 可以訪問組件實例 `this`
 }
 data:{},
 methods:{},
}