快捷導(dǎo)航

快速理解Vue路由導(dǎo)航守衛(wèi)

更新時間：2021年12月29日 12:00:01 作者：前端老實人

這篇文章主要介紹了快速理解Vue路由導(dǎo)航守衛(wèi)，“導(dǎo)航”表示路由正在發(fā)生變化，vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機會植入路由導(dǎo)航過程?中：全局的,?單個路由獨享的,?或者組件級的，下面來快速來接具體內(nè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) // 不離開
},
}