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

　　有多種方式可以在路由導航發生時執行鉤子：全局的、單個路由獨享的、或者組件級的。

一、全局鉤子

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

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

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

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

二、某個路由獨享的鉤子

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

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

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

三、組件內的鉤子

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

const 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，因為鉤子在導航確認前被調用，因此即將登場的新組件還沒被創建。

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

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

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

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

1、beforeRouteEnter(to,from,next)

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

2、beforeRouteUpdate(to,from,next)

? ? ? ? About組件是有二級導航的，在切換二級導航的時候，對應的內容是在變化的；但是about組件是復用的，只會生成一次，切換二級導航的時，如何知道導航在更新呢？

? ? ? ? 一個組件有二級導航的時候，點擊二級導航的時候導航路徑更新了，會觸發路由鉤子函數beforeRouteUpdate。

3、beforeRouteLeave(to,from,next)

? ? ? ? 當在about切換到user時，about頁面有些數據還沒有加載完成，這時候我們不讓它切換到user。

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

四、路由鉤子在實際開發中的應用場景

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

1、清除當前組件中的定時器

　　當一個組件中有一個定時器時, 在路由進行切換的時候, 可使用beforeRouteLeave將定時器進行清楚, 以免占用內存:

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

2、當頁面中有未關閉的窗口, 或未保存的內容時, 阻止頁面跳轉

　　如果頁面內有重要的信息需要用戶保存后才能進行跳轉, 或者有彈出框的情況. 應該阻止用戶跳轉

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

3、保存相關內容到Vuex中或Session中

　　當用戶需要關閉頁面時, 可以將公用的信息保存到session或Vuex中

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。