Vue路由導航守衛的示例分析

這篇文章將為大家詳細講解有關Vue路由導航守衛的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

概念：

“導航”表示路由正在發生變化

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

導航守衛：包括全局導航守衛和局部導航守衛

一、全局守衛

vue-router全局有三個守衛

• router.beforeEach ：全局前置守衛，進入路由之前

• router.beforeResolve ：全局解析守衛，在beforeRouteEnter調用之后調用（不常用）
  

• router.afterEach ：全局后置鉤子，進入路由之后

1.全局前置守衛

你可以使用 router.beforeEach 注冊一個全局前置守衛：

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

• next: Function : 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

• next() : 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

• next(false) : 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。

• next(‘/') 或者 next({ path: ‘/' }) : 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true 、 name: ‘home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

• next(error) : (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會 被傳遞給 router.onError() 注冊過的回調。
  

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

什么時候給他放行，不然他會一直循環。

2.全局解析守衛

2.5.0 新增

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

在 2.5.0+ 你可以用 router.beforeResolve 注冊一個全局守衛。這和 router.beforeEach 類似，區

別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用。

3.全局后置鉤子

你也可以注冊全局后置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：

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

因為：afterEach被調用時，路由已經跳轉完成，所以不需要next函數

三、路由獨享的守衛

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

比如：給mainpage頁面單獨配置守衛

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

四、組件內的守衛

最后，你可以在路由組件內直接定義以下路由導航守衛：

• beforeRouteEnter()：進入路由前

• beforeRouteUpdate()：路由復用同一個組件時

• beforeRouteLeave()：離開當前路由時
  

在Product中舉個例子:

// 全局解析守衛
router.beforeResolve((to,from.next) => {
})
// 全局后置鉤子
router.afterEach((to,form) => {
})
{
path: '/mainpage',
name: 'About',
component: About,
// 路由獨享守衛
beforeEnter:(to,from,next) => {
if(from.name === '/mainpage/about'){
alert("這是從about來的")
}else{
alert("這不是從about來的")
}
next(); // 必須調用來進行下一步操作。否則是不會跳轉的
}
}
},
export default {
// 組件內守衛beforeRouteUpdate被觸發的條件是：當前路由改變，但是該組件被復用的時候。
比如說：product/orders到product/cart這個路由，都復用了 Product.vue 這個組件，這個時候
beforeRouteUpdate就會被觸發。可以獲取到this實例。
一個完整的導航解析流程
// 因為這個鉤子調用的時候，組件實例還沒有被創建出來，因此獲取不到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();
},
// 路由即將要離開的時候調用此方法
// 比如說，用戶編輯了一個東西，但是還么有保存，這時候他要離開這個頁面，就要提醒他一下，還沒保
存，是否要離開
beforeRouteLeave (to, from, next) {
const leave = confirm("確定要離開嗎？");
if(leave) next() // 離開
else next(false) // 不離開
},
}

• beforeRouteUpdate被觸發的條件是：當前路由改變，但是該組件被復用的時候。

• 比如說：product/orders到product/cart這個路由，都復用了 Product.vue 這個組件，這個時候

• beforeRouteUpdate就會被觸發。可以獲取到this實例。

五、一個完整的導航解析流程

• 1、導航被觸發。

• 2、在失活的組件（即將離開的頁面組件）里調用離開守衛。 beforeRouteLeave

• 3、調用全局的 beforeEach 守衛。

• 4、在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

• 5、在路由配置里調用（路由獨享的守衛） beforeEnter。

• 6、解析異步路由組件

• 7、在被激活的組件（即將進入的頁面組件）里調用 beforeRouteEnter。

• 8、調用全局的 beforeResolve 守衛 (2.5+)。

• 9、導航被確認。

• 10、調用全局的 afterEach 鉤子。所有的鉤子都觸發完了。

• 11、觸發 DOM 更新。

• 12、用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

關于“Vue路由導航守衛的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。