這篇文章將為大家詳細(xì)講解有關(guān)vue導(dǎo)航鉤子怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、祿豐ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的祿豐網(wǎng)站制作公司

導(dǎo)航鉤子

正如其名，vue-router 提供的導(dǎo)航鉤子主要用來攔截導(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)航正要離開的路由

next: Function:一定要調(diào)用該方法來 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 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有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í)例還沒被創(chuàng)建
 },
 beforeRouteLeave (to, from, next) {
 // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
 // 可以訪問組件實(shí)例 `this`
 }
}

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

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

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

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

關(guān)于“vue導(dǎo)航鉤子怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。