本文主要介紹了詳解Vue路由鈎子及應用場景(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟随小編過來看看吧，希望能幫助到大家。
一. 路由鈎子文法
在vue-router的官方文檔中, 将路由鈎子翻譯為導航守衛, 下面是文檔中的内容摘要, 大家也可以通過傳送門前往官網閱讀詳細内容
路由鈎子
路由鈎子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的，靠。。好拗口啊。
總體來講vue裡面提供了三大類鈎子
1、全局鈎子
2、某個路由獨享的鈎子
3、元件内鈎子
三種路由鈎子中都涉及到了三個參數，這裡直接上官方介紹吧
to: Route: 即将要進入的目标 路由對象
from: Route: 目前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀态就是 confirmed (确認的)。
next(false): 中斷目前的導航。如果浏覽器的 URL 改變了(可能是使用者手動或者浏覽器後退按鈕)，那麼 URL 位址會重置到 from 路由對應的位址。
next(‘/') 或者 next({ path: ‘/' }): 跳轉到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。
(一).全局守衛(全局路由鈎子)
你可以使用 router.beforeEach 注冊一個全局前置守衛：const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
next()
})
每個守衛方法接受三個參數:to: Route: 即将要進入的目标 路由對象
from: Route: 目前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數
注意:使用全局路由鈎子, 一定要調用next()!!!
(二).路由獨享的守衛(路由内鈎子)
你可以在路由配置上直接定義 beforeEnter 守衛：const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
這些守衛與全局前置守衛的方法參數是一樣的。
(三). 元件内的守衛(元件内鈎子)
最後, 你可以在路由元件中直接定義一下路由導航守衛:beforeRouteEnter
beforeRouteUpdate (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`
}
}
二. 路由鈎子在實際開發中的應用場景
路由鈎子在實際的開發過程中使用較少, 我在實際的項目中隻在元件内使用過beforeRouteLeave, 使用場景分别為一下三類情況:
(一) 清除目前元件中的定時器
當一個元件中有一個定時器時, 在路由進行切換的時候, 可使用beforeRouteLeave将定時器進行清楚, 以免占用記憶體:beforeRouteLeave (to, from, next) {
window.clearInterval(this.timer) //清楚定時器
next()
}
(二) 當頁面中有未關閉的視窗, 或未儲存的内容時, 阻止頁面跳轉
如果頁面内有重要的資訊需要使用者儲存後才能進行跳轉, 或者有彈出框的情況. 應該阻止使用者跳轉beforeRouteLeave (to, from, next) {
//判斷是否彈出框的狀态和儲存資訊與否
if (this.dialogVisibility === true) {
this.dialogVisibility = false //關閉彈出框
next(false) //回到目前頁面, 阻止頁面跳轉
}else if(this.saveMessage === false) {
alert('請儲存資訊後退出!') //彈出警告
next(false) //回到目前頁面, 阻止頁面跳轉
}else {
next() //否則允許跳轉
}
}
(三) 儲存相關内容到Vuex中或Session中
當使用者需要關閉頁面時, 可以将公用的資訊儲存到session或Vuex中beforeRouteLeave (to, from, next) {
localStorage.setItem(name, content); //儲存到localStorage中
next()
}
相關推薦：