vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航昧辽，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的滨巴。
記住參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)米酬。你可以通過觀察 $route 對(duì)象來(lái)應(yīng)對(duì)這些變化，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)庸娱。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// do something
next();
});
router.afterEach((to, from, next) => {
console.log(to.path);
});
當(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) 路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來(lái) 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 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址棚放。
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷馅闽，然后進(jìn)行一個(gè)新的導(dǎo)航飘蚯。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true福也、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)局骤。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)暴凑。
確保要調(diào)用 next 方法峦甩，否則鉤子就不會(huì)被 resolved。
