什么是路由守衛？
路由守衛就是路由跳轉的一些驗證，比如登錄鑒權（沒有登錄不能進入個人中心頁）等等等
路由守衛分為三大類：
1. 全域守衛：前置守衛：beforeEach 后置鉤子：afterEach
2. 單個路由守衛：獨享守衛：beforeEnter
3. 組件內部守衛：beforeRouteEnter beforeRouteUpdate beforeRouteLeave
所有的路由守衛都是三個引數：
to： 要進入的目標路由（去哪兒）
from： 要離開的路由（從哪來）
next： 是否進行下一步（要不要繼續）
???♂????♂????♂????♂????♂????♂????♂????♂????♂????♂????♂????♂????♂?
寫next()相當于 next(true) 繼續執行
不寫 相當于next(false)終止執行
next(path)跳轉 例如：next("/login")
注意：后置鉤子afterEach沒有next引數
我們來詳細看看都是怎么使用的叭
全域守衛：
1、全域前置守衛beforEach：
給需要守衛的路由加上： meta: { permission: true },
router.beforeEach((to, from, next) => {
if (to.meta.permission) {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("請先登錄");
next("/login");
}
} else {
next();
}
});
2、 全域后置鉤子afterEach（少用）
router.afterEach((to, from) => {
// to and from are both route objects.
});
單個路由守衛：
// 首頁模塊路由
{
path: "/index",
name: "index",
meta: { permission: true },
component: () => import("../views/Index.vue"),
beforeEnter: function(to, from, next) {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("請先登錄");
next("/login");
}
}
},
組件內部守衛：
和data、created、mounted、methods處于平等關系
用beforeRouteEnter舉例說明：
beforeRouteEnter(to, from, next) {
// 在渲染該組件的對應路由被 confirm 前呼叫
// 不！能！獲取組件實體 `this`
// 因為當守衛執行前，組件實體還沒被創建
if (sessionStorage.getItem("token")) {
next();
} else {
alert("請先登錄");
next("/login");
}
},
beforeRouteUpdate(to, from, next) {
// 在當前路由改變，但是該組件被復用時呼叫
// 可以訪問組件實體 `this`
},
beforeRouteLeave(to, from, next) {
// 導航離開該組件的對應路由時呼叫
// 可以訪問組件實體 `this`
},
beforeRouteEnter 是進入前
beforeRouteUpdate 是路由變化時
beforeRouteLeave 是離開后，這個離開守衛通常用來禁止用戶在還未保存修改前突然離開，該導航可以通過 next(false) 來取消，
注意：
beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被呼叫，因此即將登場的新組件還沒被創建，
完整的導航決議流程
導航被觸發，
在失活的組件里呼叫 beforeRouteLeave 守衛，
呼叫全域的 beforeEach 守衛，
在重用的組件里呼叫 beforeRouteUpdate 守衛 (2.2+)，
在路由配置里呼叫 beforeEnter，
決議異步路由組件，
在被激活的組件里呼叫 beforeRouteEnter，
呼叫全域的 beforeResolve 守衛 (2.5+)，
導航被確認，
呼叫全域的 afterEach 鉤子，
觸發 DOM 更新，
呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函式，創建好的組件實體會作為回呼函式的引數傳入，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/427450.html
標籤：其他