vue中路由守衛一共有三種，一個全局路由守衛，一個是組件內路由守衛，一個是router獨享守衛。
一、全局路由守衛
所謂全局路由守衛，就是小區大門，整個小區就這一個大門，你想要進入其中任何一個房子，都需要經過這個大門的檢查
全局路由守衛有個兩個：一個是全局前置守衛，一個是全局后置守衛
router.beforeEach((to, from, next) => { console.log(to) => //到哪個頁面去？
console.log(from) => // 從哪個頁面來？
next() => // 一個回調函數 }
router.afterEach（to，from） = {}
next()：回調函數參數配置
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址
next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: ‘home’ 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項
二、組件路由守衛
// 跟methods: {}等同級別書寫，組件路由守衛是寫在每個單獨的vue文件里面的路由守衛
beforeRouteEnter (to, from, next) { //
注意，在路由進入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例 next(vm => {}) }
beforeRouteUpdate (to, from, next) { // 同一頁面，刷新不同數據時調用， }
beforeRouteLeave (to, from, next) { // 離開當前路由頁面時調用 }
三、路由獨享守衛
路由獨享守衛是在路由配置頁面單獨給路由配置的一個守衛
export default new VueRouter({ routes: [
{
path: ‘/’,
name: ‘home’,
component: ‘Home’,
beforeEnter: (to, from, next) => {
// …
}
} ] })
vue-router提供了導航鈎子:全局前置導航鈎子 beforeEach和全局后置導航鈎子 afterEach，他們會在路由即將改變前和改變后進行觸發。所以判斷用戶是否登錄需要在beforeEach導航鈎子中進行判斷。
每個守衛方法接收三個參數：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鈎子。
在項目中，一般在beforeEach這個鈎子函數中進行路由跳轉的一些信息判斷。
判斷是否登錄，是否拿到對應的路由權限等等。
了解更多前端面試相關技術知識歡迎關注小編前端培訓技術專欄！