Vue導(dǎo)航守衛(wèi)使用教程詳解
作用:通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航
植入方式:
- 全局守衛(wèi)
- 單個(gè)路由獨(dú)享守衛(wèi)
- 組件級(jí)守衛(wèi)
守衛(wèi)參數(shù)
- to: 即將要進(jìn)入的目標(biāo)路由
- from: 當(dāng)前導(dǎo)航即將要離開的路由
- next(可選): 不傳參默認(rèn)去to路由,傳參可改變目標(biāo)路由
注意:可以向任意給定的導(dǎo)航守衛(wèi)傳遞next,但是next的使用過(guò)程容易出錯(cuò),需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次。(可以出現(xiàn)多于一次,但是只能在所有邏輯路徑都不重疊的情況,否則鉤子永遠(yuǎn)不會(huì)被解析或者報(bào)錯(cuò))
守衛(wèi)返回值
- false: 取消當(dāng)前導(dǎo)航
- 路由地址:導(dǎo)航中斷,跳轉(zhuǎn)到返回的路由地址。(例如:return {name:‘login’}跳轉(zhuǎn)到登陸頁(yè))
- undefined/true: 導(dǎo)航有效,調(diào)用下一個(gè)導(dǎo)航守衛(wèi)
- 注意:如果有錯(cuò)誤,會(huì)取消導(dǎo)航并調(diào)用router.onError()
全局守衛(wèi)
全局前置守衛(wèi)
const router = createRouter({...}) router.beforeEach((to, from) => { })
- 導(dǎo)航觸發(fā)時(shí),全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用
- 守衛(wèi)是異步解析執(zhí)行,導(dǎo)航在所有守衛(wèi)resolve完之前一直處于等待
全局解析守衛(wèi)
router.beforeResolve(async to => { })
- 在導(dǎo)航被確認(rèn)之前,在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后調(diào)用
- 是獲取數(shù)據(jù)或避免用戶無(wú)法進(jìn)入頁(yè)面時(shí)執(zhí)行操作的理想位置
全局后置鉤子
router.afterEach((to, from) => { })
- 和守衛(wèi)的區(qū)別:不會(huì)接收next函數(shù),也不會(huì)改變導(dǎo)航
- 作用:分析/更改頁(yè)面標(biāo)題,聲明頁(yè)面等
單個(gè)路由獨(dú)享守衛(wèi)
const routes = [{ path: '/users/:id', component: UserDetails, beforeEnter: (to, from) => { }, // beforeEnter: [removeQuery, removeHash] }]
- 只在進(jìn)入路由時(shí)觸發(fā),不會(huì)在params/query/hash改變時(shí)觸發(fā)(如:/user/1 -> /user/2)
- 傳參:可以傳遞函數(shù)數(shù)組,有利于重用守衛(wèi)
組件級(jí)守衛(wèi)
- beforeRouteEnter: 在渲染該組件對(duì)應(yīng)路由被驗(yàn)證前調(diào)用,不能獲取this
- beforeRouteUpdate: 在組件被復(fù)用時(shí)調(diào)用,可以訪問(wèn)this
- beforeRouteLeave: 在導(dǎo)航離開該組件路由時(shí)調(diào)用,可以訪問(wèn)this
注意:beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)
beforeRouteEnter(to, from, next) { next(vm => { // 通過(guò)'vm'訪問(wèn)組件實(shí)例 }) }
離開守衛(wèi):通常用來(lái)預(yù)防用戶在還未保存修改前突然離開,可以通過(guò)返回false來(lái)取消
完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā)
- 在離開的組件里調(diào)用 beforeRouteLeave 守衛(wèi)
- 調(diào)用全局的 beforeEach 守衛(wèi)
- (如果是重用組件)調(diào)用 beforeRouteUpdate 守衛(wèi)
- 在路由配置里調(diào)用 beforeEnter
- 解析異步路由組件
- 在被激活的組件里調(diào)用 beforeRouteEnter
- 調(diào)用全局的 beforeResolve 守衛(wèi)
- 導(dǎo)航被確認(rèn)
- 調(diào)用全局的 afterEach 鉤子
- 觸發(fā) DOM 更新
- 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù),創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入
總結(jié)
全局守衛(wèi)
- beforeEach
- beforeResolve
- beforeAfter:不接收next
單個(gè)路由獨(dú)享守衛(wèi)
- beforeEnter:路由參數(shù)變化不觸發(fā)
組件級(jí)守衛(wèi)
- beforeRouteEnter: 不可訪問(wèn)this
- beforeRouteUpdate:可以訪問(wèn)this
- beforeRouteLeave:可以訪問(wèn)this
到此這篇關(guān)于Vue導(dǎo)航守衛(wèi)使用教程詳解的文章就介紹到這了,更多相關(guān)Vue導(dǎo)航守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE中路由變化this.$router(push\replace\go\back)解讀
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue環(huán)形進(jìn)度條組件實(shí)例應(yīng)用
在本文中我們給大家分享了關(guān)于vue環(huán)形進(jìn)度條組件的使用方法以及實(shí)例代碼,需要的朋友們跟著測(cè)試下吧。2018-10-10vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)
這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07vue開發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程
在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08