正如其名，vue-router?提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。

　　有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子：全局的、單個路由獨享的、或者組件級的。

一、全局鉤子

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

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

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

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

二、某個路由獨享的鉤子

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

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

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

三、組件內(nèi)的鉤子

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

const Foo = {template: `...`,beforeRouteEnter (to, from, next) {// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用// 不能獲取組件實例 `this`// 因為當(dāng)鉤子執(zhí)行前，組件實例還沒被創(chuàng)建 },beforeRouteUpdate (to, from, next) {// 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，// 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。// 可以訪問組件實例 `this` },beforeRouteLeave (to, from, next) {// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用// 可以訪問組件實例 `this` } }

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

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

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

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

　　同時注意必須有這個next()，相當(dāng)于一個按鈕開啟一樣。

1、beforeRouteEnter(to,from,next)

? ? ? ? beforeRouteEnter 函數(shù)內(nèi)部 this 是undefined，這是因為在執(zhí)行路由鉤子函數(shù)beforRouteEnter時候，組件還沒有被創(chuàng)建出來；先執(zhí)行beforRouteEnter，再執(zhí)行組件周期鉤子函數(shù)beforeCreate。我們可以通過 next 獲取組件的實例對象，如：next( (vm)=>{} )，參數(shù)vm就是組件的實例化對象。

2、beforeRouteUpdate(to,from,next)

? ? ? ? About組件是有二級導(dǎo)航的，在切換二級導(dǎo)航的時候，對應(yīng)的內(nèi)容是在變化的；但是about組件是復(fù)用的，只會生成一次，切換二級導(dǎo)航的時，如何知道導(dǎo)航在更新呢？

? ? ? ? 一個組件有二級導(dǎo)航的時候，點擊二級導(dǎo)航的時候?qū)Ш铰窂礁铝?#xff0c;會觸發(fā)路由鉤子函數(shù)beforeRouteUpdate。

3、beforeRouteLeave(to,from,next)

? ? ? ? 當(dāng)在about切換到user時，about頁面有些數(shù)據(jù)還沒有加載完成，這時候我們不讓它切換到user。

<template><div>我是about<hr><ul class="subnave f-cb"><!-- a標(biāo)簽中href屬性不需要寫地址，頁面編譯完成后自動會在href中加入對應(yīng)的路勁 --><router-link :to='{name:"About"}' exact tag="li"><a>study</a></router-link><router-link :to='{name:"Work"}' tag="li"><a>work</a></router-link><router-link :to='{name:"Hobby"}' tag="li"><a>hobby</a></router-link></ul>測試數(shù)據(jù)：{{test}}<router-view></router-view></div> </template><script>export default {data(){return {test:'改變之前'}},beforeCreate(){//組件生命周期函數(shù)console.log('beforeCreate')},//當(dāng)進(jìn)入組件之前，執(zhí)行 beforRouteEnter 路由鉤子函數(shù)beforeRouteEnter(to,from,next){console.log('beforRouteEnter')console.log(this) // 結(jié)果為undefined，因為在執(zhí)行beforRouteEnter時候，組件還沒有被創(chuàng)建出來；先執(zhí)行beforRouteEnter，再執(zhí)行beforeCreatenext((vm)=>{ //參數(shù)vm就是當(dāng)前組件的實例。vm.test = '我被改變了'})},beforeRouteUpdate(to,from,next){console.log('beforeRouteUpdate')next()},beforeRouteLeave(to,from,next){//離開組件的時候觸發(fā)//什么都不寫的時候，不會離開(走下一步) next()}} </script>

四、路由鉤子在實際開發(fā)中的應(yīng)用場景

　　路由鉤子在實際的開發(fā)過程中使用較少, 我在實際的項目中只在組件內(nèi)使用過beforeRouteLeave, 使用場景分別為一下三類情況：

1、清除當(dāng)前組件中的定時器

　　當(dāng)一個組件中有一個定時器時, 在路由進(jìn)行切換的時候, 可使用beforeRouteLeave將定時器進(jìn)行清楚, 以免占用內(nèi)存:

beforeRouteLeave (to, from, next) {window.clearInterval(this.timer) //清除定時器 next() }

2、當(dāng)頁面中有未關(guān)閉的窗口, 或未保存的內(nèi)容時, 阻止頁面跳轉(zhuǎn)

　　如果頁面內(nèi)有重要的信息需要用戶保存后才能進(jìn)行跳轉(zhuǎn), 或者有彈出框的情況. 應(yīng)該阻止用戶跳轉(zhuǎn)

beforeRouteLeave (to, from, next) {//判斷是否彈出框的狀態(tài)和保存信息與否if (this.dialogVisibility === true) {this.dialogVisibility = false //關(guān)閉彈出框next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn)}else if(this.saveMessage === false) {//彈出警告next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn)}else {next() //否則允許跳轉(zhuǎn) } }

3、保存相關(guān)內(nèi)容到Vuex中或Session中

　　當(dāng)用戶需要關(guān)閉頁面時, 可以將公用的信息保存到session或Vuex中

beforeRouteLeave (to, from, next) {localStorage.setItem(name, content); //保存到localStorage中 next() }

?

總結(jié)

以上是生活随笔為你收集整理的vue组件级路由钩子函数介绍，及实际应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。