概念：

“導(dǎo)航”表示路由正在發(fā)生變化

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機會植入路由導(dǎo)航過程 中：全局的, 單個路由獨享的, 或者組件級的。

導(dǎo)航守衛(wèi)：包括全局導(dǎo)航守衛(wèi)和局部導(dǎo)航守衛(wèi)

一、全局守衛(wèi)

vue-router全局有三個守衛(wèi)

• router.beforeEach ：全局前置守衛(wèi)，進入路由之前
• router.beforeResolve ：全局解析守衛(wèi)，在beforeRouteEnter調(diào)用之后調(diào)用（不常用）
  
• router.afterEach ：全局后置鉤子，進入路由之后

1.全局前置守衛(wèi)

你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to和from都是路由實例
// to：即將跳轉(zhuǎn)到的路由
// from：現(xiàn)在的要離開的路由
// next：函數(shù)
})

• next: Function : 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
• next() : 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認的)。
• next(false) : 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應(yīng)的地址。
• next(‘/') 或者 next({ path: ‘/' }) : 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航。你可以向 next 傳遞任意位置對象，且允許設(shè)置諸如 replace: true 、 name: ‘home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
• next(error) : (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例，則導(dǎo)航會被終止且該錯誤會 被傳遞給 router.onError() 注冊過的回調(diào)。
  

注意：如果是next(‘/') 或者 next({ path: ‘/' })，只要帶了要放行的路徑，那么前面必須有判斷，在

什么時候給他放行，不然他會一直循環(huán)。

2.全局解析守衛(wèi)

2.5.0 新增

// 全局解析守衛(wèi) 
router.beforeResolve((to,from.next) => { })

在 2.5.0+ 你可以用 router.beforeResolve 注冊一個全局守衛(wèi)。這和 router.beforeEach 類似，區(qū)

別是在導(dǎo)航被確認之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。

3.全局后置鉤子

你也可以注冊全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會接受 next 函數(shù)也不會改變導(dǎo)航本身：

// 全局后置鉤子
 router.afterEach((to,form) => { })

因為：afterEach被調(diào)用時，路由已經(jīng)跳轉(zhuǎn)完成，所以不需要next函數(shù)

三、路由獨享的守衛(wèi)

如果不想在全局配置路由的話，可以為某些路由單獨配置守衛(wèi)

比如：給mainpage頁面單獨配置守衛(wèi)

{ 
path: '/mainpage', 
name: 'About', 
component: About, // 路由獨享守衛(wèi) 
beforeEnter:(to,from,next) => {
 if(from.name === '/mainpage/about'){ alert("這是從about來的") 
   }else{
 alert("這不是從about來的") 
   }next(); // 必須調(diào)用來進行下一步操作。否則是不會跳轉(zhuǎn)的 
 }
} 
},

四、組件內(nèi)的守衛(wèi)

最后，你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：

• beforeRouteEnter()：進入路由前
• beforeRouteUpdate()：路由復(fù)用同一個組件時
• beforeRouteLeave()：離開當(dāng)前路由時
  

在Product中舉個例子:

// 全局解析守衛(wèi)
router.beforeResolve((to,from.next) => {
})
// 全局后置鉤子
router.afterEach((to,form) => {
})
{
path: '/mainpage',
name: 'About',
component: About,
// 路由獨享守衛(wèi)
beforeEnter:(to,from,next) => {
if(from.name === '/mainpage/about'){
alert("這是從about來的")
}else{
alert("這不是從about來的")
}
next(); // 必須調(diào)用來進行下一步操作。否則是不會跳轉(zhuǎn)的
}
}
},
export default {
// 組件內(nèi)守衛(wèi)beforeRouteUpdate被觸發(fā)的條件是：當(dāng)前路由改變，但是該組件被復(fù)用的時候。
比如說：product/orders到product/cart這個路由，都復(fù)用了 Product.vue 這個組件，這個時候
beforeRouteUpdate就會被觸發(fā)?？梢垣@取到this實例。
一個完整的導(dǎo)航解析流程
// 因為這個鉤子調(diào)用的時候，組件實例還沒有被創(chuàng)建出來，因此獲取不到this
beforeRouteEnter (to, from, next) {
console.log(to.name);
// 如果想獲取到實例的話
// next(vm=>{
// // 這里的vm是組件的實例（this）
// });
next();
},
beforeRouteUpdate(to,from,next){
console.log(to.name, from.name);
next();
},
// 路由即將要離開的時候調(diào)用此方法
// 比如說，用戶編輯了一個東西，但是還么有保存，這時候他要離開這個頁面，就要提醒他一下，還沒保
存，是否要離開
beforeRouteLeave (to, from, next) {
const leave = confirm("確定要離開嗎？");
if(leave) next() // 離開
else next(false) // 不離開
},
}

• beforeRouteUpdate被觸發(fā)的條件是：當(dāng)前路由改變，但是該組件被復(fù)用的時候。
• 比如說：product/orders到product/cart這個路由，都復(fù)用了 Product.vue 這個組件，這個時候
• beforeRouteUpdate就會被觸發(fā)?？梢垣@取到this實例。

五、一個完整的導(dǎo)航解析流程

• 1、導(dǎo)航被觸發(fā)。
• 2、在失活的組件（即將離開的頁面組件）里調(diào)用離開守衛(wèi)。 beforeRouteLeave
• 3、調(diào)用全局的 beforeEach 守衛(wèi)。
• 4、在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
• 5、在路由配置里調(diào)用（路由獨享的守衛(wèi)） beforeEnter。
• 6、解析異步路由組件
• 7、在被激活的組件（即將進入的頁面組件）里調(diào)用 beforeRouteEnter。
• 8、調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
• 9、導(dǎo)航被確認。
• 10、調(diào)用全局的 afterEach 鉤子。所有的鉤子都觸發(fā)完了。
• 11、觸發(fā) DOM 更新。
• 12、用創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

到此這篇關(guān)于快速理解Vue路由導(dǎo)航守衛(wèi)的文章就介紹到這了,更多相關(guān)Vue路由導(dǎo)航守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論