作用：通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航

植入方式：

• 全局守衛(wèi)
• 單個路由獨(dú)享守衛(wèi)
• 組件級守衛(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的使用過程容易出錯，需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次。（可以出現(xiàn)多于一次，但是只能在所有邏輯路徑都不重疊的情況，否則鉤子永遠(yuǎn)不會被解析或者報錯）

守衛(wèi)返回值

• false: 取消當(dāng)前導(dǎo)航
• 路由地址：導(dǎo)航中斷，跳轉(zhuǎn)到返回的路由地址。（例如：return {name:‘login’}跳轉(zhuǎn)到登陸頁）
• undefined/true: 導(dǎo)航有效，調(diào)用下一個導(dǎo)航守衛(wèi)
• 注意：如果有錯誤，會取消導(dǎo)航并調(diào)用router.onError()

全局守衛(wèi)

全局前置守衛(wèi)

const router = createRouter({...})
router.beforeEach((to, from) => {
})

• 導(dǎo)航觸發(fā)時，全局前置守衛(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ù)或避免用戶無法進(jìn)入頁面時執(zhí)行操作的理想位置

全局后置鉤子

router.afterEach((to, from) => {
})

• 和守衛(wèi)的區(qū)別：不會接收next函數(shù)，也不會改變導(dǎo)航
• 作用：分析/更改頁面標(biāo)題，聲明頁面等

單個路由獨(dú)享守衛(wèi)

const routes = [{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
    },
    // beforeEnter: [removeQuery, removeHash]
}]

• 只在進(jìn)入路由時觸發(fā)，不會在params/query/hash改變時觸發(fā)（如：/user/1 -> /user/2）
• 傳參：可以傳遞函數(shù)數(shù)組，有利于重用守衛(wèi)

組件級守衛(wèi)

• beforeRouteEnter: 在渲染該組件對應(yīng)路由被驗(yàn)證前調(diào)用，不能獲取this
• beforeRouteUpdate: 在組件被復(fù)用時調(diào)用，可以訪問this
• beforeRouteLeave: 在導(dǎo)航離開該組件路由時調(diào)用，可以訪問this

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

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

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

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

1. 導(dǎo)航被觸發(fā)
2. 在離開的組件里調(diào)用 beforeRouteLeave 守衛(wèi)
3. 調(diào)用全局的 beforeEach 守衛(wèi)
4. （如果是重用組件）調(diào)用 beforeRouteUpdate 守衛(wèi)
5. 在路由配置里調(diào)用 beforeEnter
6. 解析異步路由組件
7. 在被激活的組件里調(diào)用 beforeRouteEnter
8. 調(diào)用全局的 beforeResolve 守衛(wèi)
9. 導(dǎo)航被確認(rèn)
10. 調(diào)用全局的 afterEach 鉤子
11. 觸發(fā) DOM 更新
12. 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會作為回調(diào)函數(shù)的參數(shù)傳入

總結(jié)

全局守衛(wèi)

• beforeEach
• beforeResolve
• beforeAfter：不接收next

單個路由獨(dú)享守衛(wèi)

• beforeEnter：路由參數(shù)變化不觸發(fā)

組件級守衛(wèi)

• beforeRouteEnter: 不可訪問this
• beforeRouteUpdate：可以訪問this
• beforeRouteLeave：可以訪問this

到此這篇關(guān)于Vue導(dǎo)航守衛(wèi)使用教程詳解的文章就介紹到這了,更多相關(guān)Vue導(dǎo)航守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！