詳解Vue路由鉤子及應(yīng)用場(chǎng)景(小結(jié))
一. 路由鉤子語法
在vue-router的官方文檔中, 將路由鉤子翻譯為導(dǎo)航守衛(wèi), 下面是文檔中的內(nèi)容摘要, 大家也可以通過傳送門前往官網(wǎng)閱讀詳細(xì)內(nèi)容
路由鉤子
路由鉤子主要是給使用者在路由發(fā)生變化時(shí)進(jìn)行一些特殊的處理而定義的,靠。。好拗口啊。
總體來講vue里面提供了三大類鉤子
1、全局鉤子
2、某個(gè)路由獨(dú)享的鉤子
3、組件內(nèi)鉤子
三種路由鉤子中都涉及到了三個(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)航。
(一).全局守衛(wèi)(全局路由鉤子)
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi):
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })
每個(gè)守衛(wèi)方法接受三個(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ù)
注意:使用全局路由鉤子, 一定要調(diào)用next()!!!
(二).路由獨(dú)享的守衛(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) { // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 // 舉例來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候, // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。 // 可以訪問組件實(shí)例 `this` }, beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 `this` } }
二. 路由鉤子在實(shí)際開發(fā)中的應(yīng)用場(chǎng)景
路由鉤子在實(shí)際的開發(fā)過程中使用較少, 我在實(shí)際的項(xiàng)目中只在組件內(nèi)使用過beforeRouteLeave, 使用場(chǎng)景分別為一下三類情況:
(一) 清除當(dāng)前組件中的定時(shí)器
當(dāng)一個(gè)組件中有一個(gè)定時(shí)器時(shí), 在路由進(jìn)行切換的時(shí)候, 可使用beforeRouteLeave將定時(shí)器進(jìn)行清楚, 以免占用內(nèi)存:
beforeRouteLeave (to, from, next) { window.clearInterval(this.timer) //清楚定時(shí)器 next() }
(二) 當(dāng)頁面中有未關(guān)閉的窗口, 或未保存的內(nèi)容時(shí), 阻止頁面跳轉(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) { alert('請(qǐng)保存信息后退出!') //彈出警告 next(false) //回到當(dāng)前頁面, 阻止頁面跳轉(zhuǎn) }else { next() //否則允許跳轉(zhuǎn) } }
(三) 保存相關(guān)內(nèi)容到Vuex中或Session中
當(dāng)用戶需要關(guān)閉頁面時(shí), 可以將公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) { localStorage.setItem(name, content); //保存到localStorage中 next() }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動(dòng)態(tài)組件component標(biāo)簽的用法,在Vue中,可以通過component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue開發(fā)實(shí)現(xiàn)吸頂效果的示例代碼
這篇文章主要介紹了Vue開發(fā)實(shí)現(xiàn)吸頂效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題
這篇文章主要介紹了解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03