路由跳轉(zhuǎn)前做一些驗(yàn)證，比如登錄驗(yàn)證（未登錄去登錄頁），是網(wǎng)站中的普遍需求。對此，vue-route 提供的導(dǎo)航守衛(wèi)可以實(shí)現(xiàn)
官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
使用 router.beforeEach 注冊一個全局前置守衛(wèi)：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
? // ...
})
當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。
每個守衛(wèi)方法接收三個參數(shù)：
to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
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)航。你可以向 next 傳遞任意位置對象，且允許設(shè)置諸如 replace: true、name: ‘home’ 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實(shí)例，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。
確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。
一個小demo
// 使用鉤子函數(shù)對路由進(jìn)行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
? ? ? ? if (to.path == '/') {
? ? ? ? ? ? next('/admin_index')
? ? ? ? } else {
? ? ? ? ? ? next();
? ? ? ? }
})
