概念：

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

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

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

一、全局守衛(wèi)

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

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

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

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

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

• next: Function : 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(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)。
  

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

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

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

2.5.0 新增

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

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

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

3.全局后置鉤子

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

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

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

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

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