vue -- 路由守衛(導航守衛)

官方文檔

導航守衛其實也是路由守衛，也可以是路由攔截，我們可以通過路由攔截，來判斷用戶是否登錄，該頁面用戶是否有權限瀏覽，需要結合meta來實現
vue中路由守衛一共有三種，一個全局路由守衛，一個是組件內路由守衛，一個是router獨享守衛
所謂的路由守衛可以簡單的理解為一座房子的門口的保安，想要進入這個房子就必須通過保安的檢查，要告訴路由守衛你從哪里來？總不能隨便陌生人就給放進去？要到哪里去？然后保安再告訴你下一步該怎么做？如果你的確是這個房子主人允許進入的人，那就讓你進入，否則就要打電話給房子主人，跟房主商量(登錄注冊)，給你權限。

// 通過這個匹配判斷是否有該權限或要求，這個一般作為頁面權限設置，比如哪些頁面需要登錄才能進入，哪些不需要
to.matched.some(res => res.meta.requireAuth) 

一、全局路由守衛

所謂全局路由守衛，就是小區大門，整個小區就這一個大門，你想要進入其中任何一個房子，都需要經過這個大門的檢查
全局路由守衛有個兩個：一個是全局前置守衛，一個是全局后置守衛

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) => {
               // ...
            }
        }
    ]
})