正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航挤渐。有多種機(jī)會植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級的苹享。
記住參數(shù)或查詢的改變并不會觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察 $route 對象來應(yīng)對這些變化浴麻，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)得问。
全局前置守衛(wèi)
你可以使用 router.beforeEach 注冊一個(gè)全局前置守衛(wèi)：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)囤攀，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行宫纬，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中焚挠。
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
to: Route: 即將要進(jìn)入的目標(biāo) 路由對象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 地址會重置到from路由對應(yīng)的地址叉信。next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷艘希，然后進(jìn)行一個(gè)新的導(dǎo)航硼身。你可以向next傳遞任意位置對象，且允許設(shè)置諸如replace: true覆享、name: 'home'之類的選項(xiàng)以及任何用在router-link的toprop 或router.push中的選項(xiàng)佳遂。next(error): (2.4.0+) 如果傳入next的參數(shù)是一個(gè)Error實(shí)例，則導(dǎo)航會被終止且該錯(cuò)誤會被傳遞給router.onError()注冊過的回調(diào)撒顿。
確保要調(diào)用 next 方法丑罪，否則鉤子就不會被 resolved。
全局解析守衛(wèi)
2.5.0 新增
在 2.5.0+ 你可以用 router.beforeResolve 注冊一個(gè)全局守衛(wèi)凤壁。這和 router.beforeEach 類似吩屹，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后拧抖，解析守衛(wèi)就被調(diào)用煤搜。
全局后置鉤子
你也可以注冊全局后置鉤子，然而和守衛(wèi)不同的是唧席，這些鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身：
router.afterEach((to, from) => {
// ...
})
路由獨(dú)享的守衛(wè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) {
// 在渲染該組件的對應(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)用
// 舉例來說腐碱，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候蓬衡，
// 由于會渲染同樣的 Foo 組件喻杈，因此組件實(shí)例會被復(fù)用彤枢。而這個(gè)鉤子就會在這個(gè)情況下被調(diào)用。
// 可以訪問組件實(shí)例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
// 可以訪問組件實(shí)例 `this`
}
}
beforeRouteEnter 守衛(wèi) 不能 訪問 this筒饰，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建缴啡。
不過，你可以通過傳一個(gè)回調(diào)給 next來訪問組件實(shí)例瓷们。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)业栅，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實(shí)例
})
}
注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)谬晕。對于 beforeRouteUpdate 和 beforeRouteLeave 來說碘裕，this 已經(jīng)可用了，所以不支持傳遞回調(diào)攒钳，因?yàn)闆]有必要了帮孔。
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}
這個(gè)離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開。該導(dǎo)航可以通過 next(false) 來取消不撑。
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
完整的導(dǎo)航解析流程
- 導(dǎo)航被觸發(fā)文兢。
- 在失活的組件里調(diào)用離開守衛(wèi)。
- 調(diào)用全局的
beforeEach守衛(wèi)焕檬。 - 在重用的組件里調(diào)用
beforeRouteUpdate守衛(wèi) (2.2+)姆坚。 - 在路由配置里調(diào)用
beforeEnter。 - 解析異步路由組件实愚。
- 在被激活的組件里調(diào)用
beforeRouteEnter兼呵。 - 調(diào)用全局的
beforeResolve守衛(wèi) (2.5+)。 - 導(dǎo)航被確認(rèn)腊敲。
- 調(diào)用全局的
afterEach鉤子击喂。 - 觸發(fā) DOM 更新。
- 用創(chuàng)建好的實(shí)例調(diào)用
beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)兔仰。
