導航鉤子

vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全局的, 單個路由獨享的, 或者組件級的。

全局鉤子

你可以使用 router.beforeEach 注冊一個全局的 before 鉤子：

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})

當一個導航觸發時，全局的 before 鉤子按照創建順序調用。鉤子是異步解析執行，此時導航在所有鉤子 resolve 完之前一直處于 等待中。

每個鉤子方法接收三個參數：

確保要調用 next 方法，否則鉤子就不會被 resolved。

同樣可以注冊一個全局的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導航：

router.afterEach(route => { // ...})

你可以在路由配置上直接定義 beforeEnter 鉤子：

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

這些鉤子與全局 before 鉤子的方法參數是一樣的。

組件內的鉤子

最后，你可以在路由組件內直接定義以下路由導航鉤子：

beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeaveconst 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` }}

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