詳解Vue路由鉤子及應(yīng)用場景(小結(jié))
一. 路由鉤子語法
在vue-router的官方文檔中, 將路由鉤子翻譯為導(dǎo)航守衛(wèi), 下面是文檔中的內(nèi)容摘要, 大家也可以通過傳送門前往官網(wǎng)閱讀詳細內(nèi)容
路由鉤子
路由鉤子主要是給使用者在路由發(fā)生變化時進行一些特殊的處理而定義的,靠。。好拗口啊。
總體來講vue里面提供了三大類鉤子
1、全局鉤子
2、某個路由獨享的鉤子
3、組件內(nèi)鉤子
三種路由鉤子中都涉及到了三個參數(shù),這里直接上官方介紹吧
to: Route: 即將要進入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址。
next(‘/') 或者 next({ path: ‘/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進行一個新的導(dǎo)航。
(一).全局守衛(wèi)(全局路由鉤子)
你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi):
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })
每個守衛(wèi)方法接受三個參數(shù):
- to: Route: 即將要進入的目標(biāo) 路由對象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)
注意:使用全局路由鉤子, 一定要調(diào)用next()!!!
(二).路由獨享的守衛(wèi)(路由內(nèi)鉤子)
你可以在路由配置上直接定義 beforeEnter 守衛(wèi):
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。
(三). 組件內(nèi)的守衛(wèi)(組件內(nèi)鉤子)
最后, 你可以在路由組件中直接定義一下路由導(dǎo)航守衛(wèi):
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實例 `this` // 因為當(dāng)守衛(wèi)執(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` } }
二. 路由鉤子在實際開發(fā)中的應(yīng)用場景
路由鉤子在實際的開發(fā)過程中使用較少, 我在實際的項目中只在組件內(nèi)使用過beforeRouteLeave, 使用場景分別為一下三類情況:
(一) 清除當(dāng)前組件中的定時器
當(dāng)一個組件中有一個定時器時, 在路由進行切換的時候, 可使用beforeRouteLeave將定時器進行清楚, 以免占用內(nèi)存:
beforeRouteLeave (to, from, next) { window.clearInterval(this.timer) //清楚定時器 next() }
(二) 當(dāng)頁面中有未關(guān)閉的窗口, 或未保存的內(nèi)容時, 阻止頁面跳轉(zhuǎn)
如果頁面內(nèi)有重要的信息需要用戶保存后才能進行跳轉(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) { alert('請保存信息后退出!') //彈出警告 next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn) }else { next() //否則允許跳轉(zhuǎn) } }
(三) 保存相關(guān)內(nèi)容到Vuex中或Session中
當(dāng)用戶需要關(guān)閉頁面時, 可以將公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) { localStorage.setItem(name, content); //保存到localStorage中 next() }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue動態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動態(tài)組件component標(biāo)簽的用法,在Vue中,可以通過component標(biāo)簽的is屬性動態(tài)指定標(biāo)簽,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-08-08vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03