vue路由的鉤子函數

總體來講vue裏面提供了三大類鉤子

• 1、全局鉤子
• 2、某個路由獨享的鉤子
• 3、組件內鉤子

一 全局鉤子函數

router.beforeEach((to, from, next) => {
  /* must call `next` */
})
1.  to: (Route路由對象)  即將要進入的目標 路由對象       to對象下面的屬性： path   params  query   hash   fullPath    matched   name    meta（在matched下，但是本例可以直接用）
2.  from: (Route路由對象)  當前導航正要離開的路由
3.  next: (Function函數)   一定要調用該方法來 resolve 這個鉤子。  調用方法：next(參數或者空)   ***必須調用

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

二 某個路由獨享的鉤子

就像說的一樣，給某個路由單獨使用的，本質上和後面的組件內鉤子是一樣的。都是特指的某個路由。不同的是，這裏的一般定義在router當中，而不是在組件內。如下

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

三 組件內鉤子

你可以在路由組件內直接定義以下路由導航鉤子： 這裏再回頭看下這個路由內鉤子是怎麼用的，很簡單和data、method平級的方法：

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

注意：beforeRouteEnter 鉤子 不能 訪問 this，因爲鉤子在導航確認前被調用，因此即將登場的新組件還沒被創建。

不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，並且把組件實例作爲回調方法的參數。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問組件實例
  })
}
你可以 在 beforeRouteLeave 中直接訪問 this。這個 leave 鉤子通常用來禁止用戶在還未保存修改前突然離開。可以通過 next(false) 來取消導航。
同時注意必須有這個next()，相當於一個按鈕開啓一樣。