官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
當(dāng)做Vue項(xiàng)目的時(shí)候感覺在路由跳轉(zhuǎn)前做一些驗(yàn)證薪鹦，比如登錄驗(yàn)證疾层，是網(wǎng)站中的普遍需求。 對此厨姚，vue-router 提供的 beforeEach可以方便地實(shí)現(xiàn)全局導(dǎo)航守衛(wèi)（navigation-guards）崔慧。組件內(nèi)部的導(dǎo)航守衛(wèi)函數(shù)有beforeRouteEnter 鞠苟、beforeRouteUpdate盗温、beforeRouteLeave。
設(shè)置一個(gè)全局守衛(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 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 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挫酿。
