VueRouter導航守衛用法詳解

beforeEach
beforeResolve
afterEach

beforeEnter

beforeRouteEnter
 // 在渲染該組件的對應路由被 confirm 前調用
 // 不！能！獲取組件實例 `this`
 // 因為當守衛執行前，組件實例還沒被創建
 雖然無法直接獲取組件實力
 但是我們可以通過next參數的回調函數獲取到當前實例進行操作
 beforeRouteEnter: (to, from, next) => {
 next((vm) => {
 //vm就是當前組件實例
 });
 }
beforeRouteUpdate
 // 在當前路由改變，但是該組件被復用時調用
 // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
 // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
 // 可以訪問組件實例 `this`
beforeRouteLeave
 // 導航離開該組件的對應路由時調用
 // 可以訪問組件實例 `this`

（摘抄自官網）
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
 next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
 next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
 next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。