路由守衛(wèi)是什么瞒爬？
路由守衛(wèi)又稱導(dǎo)航守衛(wèi)懈凹，指的是路由在跳轉(zhuǎn)前蜀变、中、后過程中的一些鉤子函數(shù)介评，這些函數(shù)可以讓你操作一些其他的事库北，常作用于某些后臺管理系統(tǒng)在設(shè)置權(quán)限的時候，在實(shí)現(xiàn)路由跳轉(zhuǎn)前校驗(yàn)是否有權(quán)限们陆，有權(quán)限就可以通過寒瓦，反之就會被執(zhí)行其他操作，如返回登錄頁坪仇。
路由守衛(wèi)的分類
一杂腰、全局守衛(wèi)
- 全局前置守衛(wèi)beforeEach
在路由跳轉(zhuǎn)前觸發(fā)，這個鉤子作用主要是用于登錄驗(yàn)證椅文，判斷用戶是否滿足登錄要求喂很，滿足就跳轉(zhuǎn)到其他頁面，不滿足就強(qiáng)制跳轉(zhuǎn)到登錄頁皆刺。
router.beforeEach((to, from, next) => {
})
- 全局解析守衛(wèi)beforeResolve
在導(dǎo)航被確認(rèn)之前少辣，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用羡蛾。
router.beforeResolve((to, from, next) => {
})
- 全局后置守衛(wèi)afterEach（參數(shù)中沒有next）
router.afterEach((to, from) => {
})
二漓帅、組件內(nèi)的守衛(wèi)
- beforeRouteEnter
不能訪問 this，因?yàn)槭匦l(wèi)在路由確認(rèn)前被調(diào)用痴怨，組件還沒有被創(chuàng)建
beforeRouteEnter (to, fromnext) {}
- beforeRouteUpdate
在當(dāng)前路由改變忙干，但是該組件復(fù)用時調(diào)用,舉例來說，對于一個帶有動態(tài)數(shù)的路徑 /foo/:id浪藻，在 /foo/1和 /foo/2 之間跳轉(zhuǎn)的時候豪直，由于會渲染同樣的 Foo 組件因此組件實(shí)例會被復(fù)用。而這個就會在這個情況下被調(diào)用珠移。
beforeRouteUpdate (to, from,next) {
// 可以訪問組件實(shí)例 `this`
}
- beforeRouteLeave
這個離開守衛(wèi)通常用來禁止用戶在還未保存信息前突然離開。該導(dǎo)航可以通過 next(false) 來取消末融。
beforeRouteLeave (to, from,next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時用
// 可以訪問組件實(shí)例 `this`
}
三、路由獨(dú)享的守衛(wèi)
- beforeEnter
用法與全局守衛(wèi)一致。只是巧号，將其寫進(jìn)其中一個路由對象中矾瘾，只在這個路由下起作用。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
// 只在foo路由下起作用
}
}
]
})
路由守衛(wèi)的參數(shù)
1巧婶、to
- 即將要跳轉(zhuǎn)的路由
- 相當(dāng)于$router
2乾颁、from
- 當(dāng)前離開的路由
3涂乌、next()
以下是next()的常見的用法：
（1）next()，表示可以放行英岭，跳轉(zhuǎn)到需要跳轉(zhuǎn)的路由
（2）next('路徑')湾盒，表示強(qiáng)制跳轉(zhuǎn)到某個路由。例如：next('/login')表示強(qiáng)制跳轉(zhuǎn)到登錄頁
（3）next(false)诅妹，中斷當(dāng)前的導(dǎo)航罚勾。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址吭狡。
項(xiàng)目中使用路由守衛(wèi)
