導(dǎo)航鉤子

（譯者：『導(dǎo)航』表示路由正在發(fā)生改變。）

正如其名，vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。

全局鉤子

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

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

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局的 before 鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有鉤子 resolve 完之前一直處于等待中。

每個(gè)鉤子方法接收三個(gè)參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved。

同樣可以注冊(cè)一個(gè)全局的 after 鉤子，不過(guò)它不像 before 鉤子那樣，after 鉤子沒(méi)有next 方法，不能改變導(dǎo)航：

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

某個(gè)路由獨(dú)享的鉤子

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

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

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

組件內(nèi)的鉤子

最后，你可以使用 beforeRouteEnter 和 beforeRouteLeave，在路由組件內(nèi)直接定義路由導(dǎo)航鉤子，

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
 // 不！能！獲取組件實(shí)例 `this`
 // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
 },
 beforeRouteLeave (to, from, next) {
 // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
 // 可以訪問(wèn)組件實(shí)例 `this`
 }
}

beforeRouteEnter 鉤子 不能 訪問(wèn) this，因?yàn)殂^子在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。

不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

beforeRouteEnter (to, from, next) {
 next(vm => {
 // 通過(guò) `vm` 訪問(wèn)組件實(shí)例
 })
}

你可以 在 beforeRouteLeave 中直接訪問(wèn) this。這個(gè) leave 鉤子通常用來(lái)禁止用戶在還未保存修改前突然離開(kāi)?？梢酝ㄟ^(guò) next(false) 來(lái)取消導(dǎo)航。

在做項(xiàng)目的時(shí)候，需求是在關(guān)閉頁(yè)面的時(shí)候給客戶彈出一個(gè)框，增加客戶停留的時(shí)間。 最近看了一下這個(gè)鉤子，覺(jué)得很不錯(cuò)。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論