vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航
全局守衛(wèi)
全局前置守衛(wèi)
當(dāng)一個導(dǎo)航觸發(fā)時荷并，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用趁尼。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中
router.beforeEach((to, from, next) => {
/*
to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子
next(): 進(jìn)行管道中的下一個鉤子震嫉。如果全部鉤子執(zhí)行完了赤赊，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)
next(false): 中斷當(dāng)前的導(dǎo)航
如果瀏覽器的 URL 改變了, 那么 URL 地址會重置到 from 路由對應(yīng)的地址
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷渊涝，然后進(jìn)行一個新的導(dǎo)航
*/
console.log('beforeEach');
next(); // 確保要調(diào)用 next 方法慎璧，否則鉤子就不會被 resolved
});
全局解析守衛(wèi)(2.5.0+ )
你可以用 router.beforeResolve 注冊一個全局守衛(wèi)。這和 router.beforeEach 類似跨释，區(qū)別是在導(dǎo)航被確認(rèn)之前胸私，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用
router.beforeResolve((to, from, next) => {
console.log('beforeResolve');
next();
});
全局后置鉤子
注冊全局后置鉤子鳖谈，然而和守衛(wèi)不同的是岁疼，這些鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身
router.afterEach((to, from) => {
console.log('afterEach')
});
路由獨享守衛(wèi)
{
path: "/",
name: "home",
component: Home,
beforeEnter: (to, from, next) => {
console.log('獨立')
next();
}
},
組件內(nèi)的守衛(wèi)
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
// 不！能缆娃！獲取組件實例 `this`
// 因為當(dāng)守衛(wèi)執(zhí)行前捷绒，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
// 舉例來說贯要，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id暖侨，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
// 由于會渲染同樣的 Foo 組件崇渗，因此組件實例會被復(fù)用字逗。而這個鉤子就會在這個情況下被調(diào)用。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
// 可以訪問組件實例 `this`
}
完整的導(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)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。
