我們在每學(xué)一項新知識的時候，首先我們得至少這項知識有什么用泉褐，能為我們解決什么問題运翼。對吧？
導(dǎo)航守衛(wèi)兴枯，也稱路由守衛(wèi)
怎么理解這個名詞呢血淌？
官方解釋：vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。
簡單來說财剖，就是路由跳轉(zhuǎn)時我們要進行的操作
舉個栗子悠夯，比如登錄跳轉(zhuǎn)
我們在登錄跳轉(zhuǎn)之前必須先做登錄驗證
在我們沒有登陸之前，我們當然不能跳轉(zhuǎn)到某個路由對象
以下內(nèi)容是我結(jié)合官方文檔總結(jié)出來的↓↓↓
路由守衛(wèi)可以分成以下幾類
一躺坟、全局前置守衛(wèi)
二沦补、全局解析守衛(wèi)
三、全局后置鉤子
四咪橙、路由獨享守衛(wèi)
五夕膀、組件內(nèi)守衛(wèi)
我們先看一下整個導(dǎo)航解析流程↓↓↓
一個完整的導(dǎo)航解析流程
一、導(dǎo)航被觸發(fā)
二美侦、在失活的組件产舞，也就是即將離開的頁面組件里調(diào)用離開守衛(wèi)beforeRouteLeave
三、調(diào)用全局的前置守衛(wèi)beforeEach
四菠剩、在重用的組件里調(diào)用里調(diào)用beforeRouteUpdate
五易猫、調(diào)用路由獨享的守衛(wèi)beforeEnter
六、解析異步路由組件
七具壮、在被激活的組件里准颓，也就是即將進入的頁面組件里面調(diào)用beforeRouteEnter
八、調(diào)用全局的解析守衛(wèi)beforeResolve
九棺妓、導(dǎo)航被確認
十攘已、調(diào)用全局的后置鉤子afterEach
十一、觸發(fā)DOM更新
十二怜跑、創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)里傳給next的回調(diào)函數(shù)
全局前置守衛(wèi)
我們可以使用router.beforeEach注冊一個全局前置路由
前置路由里面放的是頁面跳轉(zhuǎn)之前要處理的邏輯
router.beforeEach( (to, from, next) => { } )
當一個導(dǎo)航觸發(fā)時样勃，全局前置路由按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行妆艘，此時導(dǎo)航在所有守衛(wèi)resolve完之前一直處于等待中彤灶。
參數(shù)解析：
to：即將要進入的目標
from：當前導(dǎo)航正要離開的路由
next：前面的to的from都是路由對象，而這里的next是一個方法批旺，一定要調(diào)用該方法來resolve這個鉤子幌陕，執(zhí)行效果依賴next方法的調(diào)用參數(shù)。
-
next()進行管道中的下一個鉤子汽煮。如果全部鉤子執(zhí)行完了搏熄，則導(dǎo)航的狀態(tài)就是confirmed -
next(false)中斷當前的導(dǎo)航棚唆。如果瀏覽器的URL改變了(可能是用戶手動點擊瀏覽器后退按鈕) ，那個URL地址會重置到from路由對應(yīng)的地址心例。 -
next(‘/’)或者next({ path: ‘/’})跳轉(zhuǎn)到一個不同的地址宵凌。當前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航止后。 -
next(error)如果傳入next的參數(shù)是一個Error實例瞎惫，則導(dǎo)航會被種植且該錯誤會被傳遞給router.onError()注冊過的回調(diào)。
確保要調(diào)用next方法译株，否則鉤子就不會被resolved
全局解析守衛(wèi)
我們可以用router.beforeResolve注冊一個全局守衛(wèi)瓜喇。
router.beforeResolve(to, from, next)也是一個全局守衛(wèi)，這和router.beforeEach類似歉糜，區(qū)別是在導(dǎo)航被確認(所有導(dǎo)航鉤子都結(jié)束)之前乘寒，同時在所有組件內(nèi)守衛(wèi)和異步路由被解析之后，解析守衛(wèi)就被調(diào)用匪补。
全局后置鉤子
一般是用于處理路由跳轉(zhuǎn)后的一些操作
router.afterEach( (to, from) => {} )
路由獨享守衛(wèi)
路由獨享守衛(wèi)是在路由列表里面配置
如：
{
path: ‘home’,
component: Home,
beforeEnter: (to, from, next) => {
if (from.name == login) { console.log(‘這是從登錄頁跳轉(zhuǎn)過來的’)}
else { console.log(‘這不是從登錄頁跳轉(zhuǎn)過來的’) }
next() //如果添加了beforeEnter()記得一定要調(diào)用next()這個鉤子伞辛，要不然路由不會跳轉(zhuǎn)
}
}
組件內(nèi)守衛(wèi)
組件內(nèi)守衛(wèi)，就是在.vue文件里面的守衛(wèi)
有三個鉤子函數(shù)
beforeRouteEnter-進入組件之前
beforeRouteEnter(to, from, next){} //頁面還沒渲染好的時候調(diào)用夯缺，不能使用this
在進入組件前被調(diào)用蚤氏，組件實例還沒有被創(chuàng)建，不能使用this關(guān)鍵字
不過可以通過傳一個回調(diào)next來訪問組件實例喳逛，也就是可以通過next回調(diào)實例化后的組件瞧捌，用next函數(shù)的vm參數(shù)充當this
export default {
data(){
return{
infor:'ThinkBig'
}
},
beforeRouteEnter:(to,from,next)=>{
//此時該組件還沒被實例化
alert(this.infor); //彈出消息框信息為 undefined
next(vm =>{
//此時該組件被實例化了
alert(vm.infor); //彈出消息框信息為 ThinkBig
})
}
beforeRouteLeave-離開組件之后
離開組件之后調(diào)用，可以調(diào)用this關(guān)鍵字
beforeRouteLeave(to, from, next) {}
export default {
beforeRouteLeave(to,from,next){
if(confirm("確定離開嗎润文？") == true){
next() //跳轉(zhuǎn)到另一個路由
}else{
next(false);//不跳轉(zhuǎn)
}
}
}
boforeRouteUpdate-組件復(fù)用觸發(fā)更新
該組件被復(fù)用時調(diào)用，可以調(diào)用this關(guān)鍵字
boforeRouteUpdate(to, from, next) {
//在當前路由改變殿怜，但是該組件被復(fù)用時調(diào)用
//舉例來說典蝌，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候头谜，
//由于會渲染同樣的 Foo 組件骏掀，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用柱告。
//可以訪問組件實例 `this`
}
