快捷導(dǎo)航

Vue導(dǎo)航守衛(wèi)使用教程詳解

更新時(shí)間：2023年04月11日 10:32:28 作者：蒲公英想養(yǎng)花

這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程，可以向任意給定的導(dǎo)航守衛(wèi)傳遞next，但是next的使用過(guò)程容易出錯(cuò)，需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次

守衛(wèi)參數(shù)

to: 即將要進(jìn)入的目標(biāo)路由
from: 當(dāng)前導(dǎo)航即將要離開(kāi)的路由
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ù)或避免用戶(hù)無(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)航離開(kāi)該組件路由時(shí)調(diào)用，可以訪問(wèn)this

注意：beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通過(guò)'vm'訪問(wèn)組件實(shí)例
    })
}

離開(kāi)守衛(wèi)：通常用來(lái)預(yù)防用戶(hù)在還未保存修改前突然離開(kāi)，可以通過(guò)返回false來(lái)取消

完整的導(dǎo)航解析流程

導(dǎo)航被觸發(fā)
在離開(kāi)的組件里調(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ù)傳入