路由鈎子函數有三種：
1：全局鈎子： beforeEach、 afterEach
2：單個路由里面的鈎子： beforeEnter、 beforeLeave
3:組件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
1.全局守衛
無論訪問哪一個路徑，都會觸發全局的鈎子函數，位置是調用router的方法
router.beforeEach() 進入之前觸發
router.afterEach() 進入之后觸發
⑴ beforeEach（全局前置守衛）
使用 router.beforeEach 注冊一個全局前置守衛
每個守衛方法接收三個參數：
①to: Route: 即將要進入的目標路由對象（to是一個對象，是將要進入的路由對象，可以用to.path調用路由對象中的屬性）
②from: Route: 當前導航正要離開的路由
③next: Function: 這是一個必須需要調用的方法，執行效果依賴 next 方法的調用參數。
next參數：
next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是confirmed (確認的)。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按 鈕)，那么 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在router-link 的 to prop或router.push中的選項。
next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給router.onError()注冊過的回調。
ps~ : 確保要調用 next 方法，否則鈎子就不會被 resolved。
(2). afterEach（全局后置鈎子）
和守衛不同的是，這些鈎子不會接受 next 函數也不會改變導航本身
2.路由獨享的守衛(單個路由獨享的)
寫在路由配置中，只有訪問到這個路徑，才能觸發鈎子函數
3.組件級路由鈎子
寫在組件中,訪問路徑，即將渲染組件的時候觸發的
{
data,
methods
beforeRouteEnter(){
this 不指向實例 組件還沒創建
next((vm) =>{
vm就是實例
})
}
beforeRouteUpdate(){}
beforeRouteLeave(){}
}
beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，並且把組件實例作為回調方法的參數。
注意~ ： beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。
這個離開守衛beforeRouteLeave()通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。
完整的導航解析流程：
1.導航被觸發。
2.在失活的組件里調用離開守衛。
3.調用全局的 beforeEach 守衛。
4.在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5.在路由配置里調用 beforeEnter。
6.解析異步路由組件。
7.在被激活的組件里調用 beforeRouteEnter。
8.調用全局的 beforeResolve 守衛 (2.5+)。
9.導航被確認。
10.調用全局的 afterEach 鈎子。
11.觸發 DOM 更新。
12.用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。