這裡先放上官網的教程和說明：點擊這裡，vue導航守衛官方文檔 路由守衛 路由守衛說白了就是路由攔截，在地址欄跳轉之前 之後 跳轉的瞬間 乾什麼事 全局守衛 全局守衛顧名思義，就是全局的，整個項目所有路由，跳轉所用到的守衛（攔截），設置了全局守衛之後，只要路由（瀏覽器地址欄）發生變化就會觸發的事件 全 ...
這裡先放上官網的教程和說明：點擊這裡，vue導航守衛官方文檔
路由守衛
路由守衛說白了就是路由攔截，在地址欄跳轉之前 之後 跳轉的瞬間 乾什麼事
全局守衛
全局守衛顧名思義，就是全局的，整個項目所有路由，跳轉所用到的守衛（攔截），設置了全局守衛之後，只要路由（瀏覽器地址欄）發生變化就會觸發的事件
全局守衛分為二部分 前置守衛（跳轉之前） 後置鉤子（跳轉之後）
前置守衛：
router.beforeEach
這個方法有三個參數
（to, from, next）
to：即將進入的地址，比如說 點擊按鈕 從 A 跳轉到 B ，那麼to就是 B 的路由對象，
from：要離開的地址，比如說 點擊按鈕 從 A 跳轉到 B ，那麼to就是 A 的路由對象，
next：就是在跳轉的時候要執行的事件，比如說 點擊按鈕 從 A 跳轉到 B ，然後我在next執行了一個方法 next({ path: ‘/C’ }) 這樣就會跳轉到C 頁面，而不是 B 頁面了，這就是路由攔截了，如果這麼寫的話 不管你願來是想從 那個頁面 跳轉 那個頁面 他都會給你跳轉到 C 頁面
在這裡就可以判斷，如果滿足一定的條件 就讓他 next({ path: ‘/C’ }) 就是滿足一定的條件 才讓他跳轉到C 不滿足的時候 就正常跳轉
這裡next 還有一個作用 next(false) 這樣會中斷路由的跳轉 比如說 點擊按鈕 從 A 跳轉到 B 然後我執行了 next(false) 那麼瀏覽器就不會進行跳轉 從新回到A頁面 這樣就阻止了路由的跳轉 在這裡就可以判斷，如果滿足一定的條件 就讓他 next(false) 這樣就不進行跳轉了
路由獨享守衛
顧名思義：就是這個守衛，只是單獨的這個組件獨享的，局部的，不是全局的，只有這個路由在進行跳轉的時候，才會觸發的，其他的組件，路由進行跳轉的時候不執行這個方法
獨享守衛有三個方法：
beforeRouteEnter 在渲染該組件的對應路由被 confirm 前調用 就是頁面跳轉前要執行的方法 要乾的事
beforeRouteUpdate 在當前路由改變，但是該組件被覆用時調用 就是當頁面 在A 跳轉到 B 的一瞬間 要乾的事
beforeRouteLeave 導航離開該組件的對應路由時調用 就是在跳轉完成之後 要乾的事
這三個方法 都有三個參數 （to, from, next） 跟全局守衛的 三個參數用法一樣
其中 beforeRouteEnter 守衛 不能 訪問 this 其他兩個守衛可以訪問到this
