Vue路由守衛(wèi)
路由守衛(wèi)，簡(jiǎn)單理解來說就是砚哗，當(dāng)用戶要進(jìn)行一些操作時(shí)，我需要用戶的一些信息或數(shù)據(jù)或行為砰奕，我判斷過后蛛芥，才會(huì)同意用戶進(jìn)行操作，說到這里军援，我想大家心里都或多或少有點(diǎn)理解了吧仅淑，官方一點(diǎn)的解釋就是進(jìn)行操作的鑒權(quán)，當(dāng)操作與之條件匹配時(shí)胸哥，操作成功涯竟，當(dāng)操作與之不匹配時(shí)，操作終止空厌，作用就是是對(duì)路由進(jìn)行權(quán)限控制庐船。
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)嘲更、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)
全局路由守衛(wèi)
全局路由守衛(wèi)醉鳖，顧名思義，一旦配置哮内，那么作用范圍就是所有的路由盗棵，全局路由又分為全局前置守衛(wèi)和全局后置守衛(wèi)
全局前置守衛(wèi)
全局前置守衛(wèi)，組件初始化時(shí)調(diào)用北发，每次路由切換之前調(diào)用纹因，路由切換之前指的就是，舉個(gè)例子說琳拨，當(dāng)前我在A路由組件瞭恰，我要切換到B路由組件，那么前置路由守衛(wèi)就是在我點(diǎn)了切換按鈕狱庇，但B路由組件還沒有被呈現(xiàn)在頁面上的時(shí)候被調(diào)用惊畏。
//全局前置守衛(wèi)
router.beforeEach((to,from,next) =>{
//第一個(gè)參數(shù)to恶耽，包含的內(nèi)容是切換后的路由對(duì)象，也就是跳轉(zhuǎn)后的路由對(duì)象
//第二個(gè)參數(shù)from颜启，包含的內(nèi)容的是切換前的路由對(duì)象偷俭，也就是跳轉(zhuǎn)前的路由對(duì)象
//第三個(gè)參數(shù)next()，是否往下執(zhí)行缰盏，執(zhí)行的話涌萤，如果不寫的話路由就不會(huì)跳轉(zhuǎn)，操作將會(huì)終止
})
全局后置守衛(wèi)
全局后置守衛(wèi)口猜，組件初始化時(shí)調(diào)用负溪，每次路由切換之后調(diào)用，路由切換之后指的就是济炎，舉個(gè)例子說川抡，當(dāng)前我在A路由組件，我要切換到B路由組件须尚，那么前置路由守衛(wèi)就是在我點(diǎn)了切換按鈕B路由組件呈現(xiàn)到頁面中后被調(diào)用猖腕。
//該文件用于創(chuàng)建整個(gè)應(yīng)用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";
//引入路由組件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二級(jí)路由組件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'
import DataList from '../pages/DataList'
//創(chuàng)建并暴露一個(gè)VueRouter
const router = new VueRouter({
routes:[
//配置路由路徑和路由組件
{
//這里的路徑可自由定義恨闪，但是為了初學(xué)者好理解倘感，我就采用和組件同樣的命名，防止在寫路徑的時(shí)候搞混
name:'導(dǎo)航一',
path:'/TestA',
component:TestA, //要跳轉(zhuǎn)到的組件
children:[
{
// 給二級(jí)路由起名字
name:'DataName',
path:'DataList/:introduce', //起到占位作用
component:DataList
}
]
},
{
name:'導(dǎo)航二',
path:'/TestB',
component:TestB,
meta:{isAuth:true,},
// 配置二級(jí)路由
children:[
{
path:'TestBHzw', //重點(diǎn)注意咙咽，不要加 /
component:TestBHzw
},
{
path:'TestBHyrz',
component:TestBHyrz
}
]
}
]
})
//全局前置路由老玛，配合瀏覽器localStorage進(jìn)行鑒權(quán)操作
router.beforeEach((to, from, next) =>{
//首先，我們先看一看to和from參數(shù)钧敞，next就是執(zhí)行的意思蜡豹，不寫頁面是不會(huì)跳轉(zhuǎn)的
// console.log(to, from);
if(to.meta.isAuth){ //判斷是否需要鑒權(quán)
if(localStorage.getItem('name') === '張三'){
next();
}else{
alert('不好意思，姓名不對(duì)溉苛，沒有權(quán)限');
}
}else{
next()
}
})
// 全局后置路由镜廉，簡(jiǎn)單寫一個(gè)彈窗，在進(jìn)入每一個(gè)路由組件后彈出一句話
router.afterEach(() =>{
alert('歡迎你Ｓ拚健娇唯！');
})
export default router;
獨(dú)享守衛(wèi)
組件獨(dú)享守衛(wèi)是在進(jìn)入組件時(shí)被調(diào)用,區(qū)別就在于，想對(duì)那個(gè)路由進(jìn)行權(quán)限控制就直接在其路由配置項(xiàng)中添加守衛(wèi)寂玲，作用域也僅限于該路由
beforeEnter(to,from,next){
//第一個(gè)參數(shù)to塔插，包含的內(nèi)容是切換后的路由對(duì)象，也就是跳轉(zhuǎn)后的路由對(duì)象
//第二個(gè)參數(shù)from拓哟，包含的內(nèi)容的是切換前的路由對(duì)象想许，也就是跳轉(zhuǎn)前的路由對(duì)象
//第三個(gè)參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話流纹，如果不寫的話路由就不會(huì)跳轉(zhuǎn)糜烹，操作將會(huì)終止
}
組件內(nèi)守衛(wèi)
當(dāng)使用路由規(guī)則進(jìn)入該組件或離開該組件時(shí)，就會(huì)觸發(fā)組件內(nèi)守衛(wèi)的調(diào)用漱凝，而組件內(nèi)守衛(wèi)的作用于范圍也僅限于該組件
//進(jìn)入守衛(wèi)：通過路由規(guī)則疮蹦，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
//第一個(gè)參數(shù)to，包含的內(nèi)容是切換后的路由對(duì)象碉哑，也就是跳轉(zhuǎn)后的路由對(duì)象
//第二個(gè)參數(shù)from，包含的內(nèi)容的是切換前的路由對(duì)象亮蒋，也就是跳轉(zhuǎn)前的路由對(duì)象
//第三個(gè)參數(shù)next()扣典，是否往下執(zhí)行，執(zhí)行的話慎玖，如果不寫的話路由就不會(huì)跳轉(zhuǎn)贮尖，操作將會(huì)終止
},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
//第一個(gè)參數(shù)to趁怔，包含的內(nèi)容是切換后的路由對(duì)象湿硝，也就是跳轉(zhuǎn)后的路由對(duì)象
//第二個(gè)參數(shù)from，包含的內(nèi)容的是切換前的路由對(duì)象润努，也就是跳轉(zhuǎn)前的路由對(duì)象
//第三個(gè)參數(shù)next()关斜，是否往下執(zhí)行，執(zhí)行的話铺浇，如果不寫的話路由就不會(huì)跳轉(zhuǎn)痢畜，操作將會(huì)終止
}
