? —— “導(dǎo)航”表示路由正在發(fā)生改變内贮。
路由鉤子函數(shù)有三種：
? ? ? ? ? ? 1：全局鉤子： beforeEach介杆、 afterEach辨宠、beforeResolve
? ? ? ? ? ? 2：?jiǎn)蝹€(gè)路由里面的鉤子：? beforeEnter
? ? ? ? ? ? 3:組件路由：beforeRouteEnter哄陶、 beforeRouteUpdate、 beforeRouteLeave
1.全局守衛(wèi)
無(wú)論訪問(wèn)哪一個(gè)路徑丘损，都會(huì)觸發(fā)全局的鉤子函數(shù)普办，位置是調(diào)用router的方法
router.beforeEach() 進(jìn)入之前觸發(fā)
router.afterEach() 進(jìn)入之后觸發(fā)
⑴ beforeEach（全局前置守衛(wèi)）
使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
①to: Route: 即將要進(jìn)入的目標(biāo)路由對(duì)象（to是一個(gè)對(duì)象工扎，是將要進(jìn)入的路由對(duì)象徘钥，可以用to.path調(diào)用路由對(duì)象中的屬性）
②from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
③next: Function: 這是一個(gè)必須需要調(diào)用的方法，執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)肢娘。
next參數(shù)：
? ? next(): 進(jìn)行管道中的下一個(gè)鉤子呈础。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed (確認(rèn)的)橱健。
? ? next(false): 中斷當(dāng)前的導(dǎo)航而钞。如果瀏覽器的 URL 改變了 (可能是用戶(hù)手動(dòng)或者瀏覽器后退按 鈕)，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址拘荡。
? ? next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址臼节。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象网缝，且允許設(shè)置諸如 replace: true巨税、name: 'home' 之類(lèi)的選項(xiàng)以及任何用在router-link 的 to prop或router.push中的選項(xiàng)。
? ? next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例粉臊，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)草添。
ps~ : 確保要調(diào)用 next 方法，否則鉤子就不會(huì)被 resolved扼仲。
(2). afterEach（全局后置鉤子）
和守衛(wèi)不同的是远寸，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身
2.路由獨(dú)享的守衛(wèi)(單個(gè)路由獨(dú)享的)
寫(xiě)在路由配置中，只有訪問(wèn)到這個(gè)路徑屠凶，才能觸發(fā)鉤子函數(shù)
3.組件級(jí)路由鉤子
寫(xiě)在組件中,訪問(wèn)路徑，即將渲染組件的時(shí)候觸發(fā)的
{
data,
methods
beforeRouteEnter(){
? ? ? ? this 不指向?qū)嵗?組件還沒(méi)創(chuàng)建
? ? ? ? next((vm) =>{
? ? ? ? ? ? ? ? vm就是實(shí)例
? ? ? ? })
}
beforeRouteUpdate(){}
beforeRouteLeave(){}
}
beforeRouteEnter 守衛(wèi) 不能 訪問(wèn) this矗愧，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建倡怎。不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪問(wèn)組件實(shí)例贱枣。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)监署，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。
注意~ ： beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)纽哥。對(duì)于 beforeRouteUpdate 和 beforeRouteLeave 來(lái)說(shuō)钠乏，this 已經(jīng)可用了，所以不支持傳遞回調(diào)春塌，因?yàn)闆](méi)有必要了晓避。
這個(gè)離開(kāi)守衛(wèi)beforeRouteLeave()通常用來(lái)禁止用戶(hù)在還未保存修改前突然離開(kāi)。該導(dǎo)航可以通過(guò) next(false) 來(lái)取消只壳。
完整的導(dǎo)航解析流程：
1.導(dǎo)航被觸發(fā)俏拱。
2.在失活的組件里調(diào)用離開(kāi)守衛(wèi)。
3.調(diào)用全局的 beforeEach 守衛(wèi)吼句。
4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)锅必。
5.在路由配置里調(diào)用 beforeEnter。
6.解析異步路由組件惕艳。
7.在被激活的組件里調(diào)用 beforeRouteEnter搞隐。
8.調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
9.導(dǎo)航被確認(rèn)远搪。
10.調(diào)用全局的 afterEach 鉤子劣纲。
11.觸發(fā) DOM 更新。
12.用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)谁鳍。
