一愁拭、全局守衛(wèi)(兩種,在main.js文件下設(shè)置)
第一種:router.beforeEach((to,from,next)=>{})
router.beforeEach((to,from,next)=>{
? if(to.path == '/login' || to.path == '/register'){
? ? next();
? }else{
? ? alert('您還沒有登錄亏吝,請先登錄');
? ? next('/login');
? }
})
#回掉函數(shù)中的參數(shù)
*to:進(jìn)入到那個路由去
*from:從那個路由來的(上一個路由)
*next:順延岭埠,next()---(放行)---next('/login')---(不放行,讓他跳轉(zhuǎn)到login頁面)--函數(shù)蔚鸥,決定是否展示你要看到的路由頁面
第二種:router.afterEach((to,from)=>{})
#只有兩個參數(shù)惜论,to:進(jìn)入到哪個路由去,from:從哪個路由離止喷。
#如下馆类,每次切換路由時,都會彈出alert弹谁,點擊確定后乾巧,展示當(dāng)前頁面。
router.afterEach((to,from)=>{
? alert("after each");
})
二预愤、路由獨享守衛(wèi)
#在router文件夾下index.js文件 和path同級沟于。
beforeEnter((to,from,next)=>{//里邊的用法和全局一樣})
三、組件內(nèi)部守衛(wèi)
#在組件.vue內(nèi)部寫和 data(){}同級
//1.組件進(jìn)入之前的守衛(wèi)
beforeRouteEnter(to,from,next){//和全局使用一樣}? ? //生命周期還沒開始植康,所以這個函數(shù)沒有this
//2.組件更新守衛(wèi)
beforeRouteUpdate(to,from,next){//和全局使用一樣}? //? "/:id"動態(tài)路由發(fā)生變化旷太,頁面沒有重新加載,觸發(fā)更新守衛(wèi)
//3.組件離開守衛(wèi)
beforeRouteLeave(to,from,next){//和全局使用一樣}? ? //在離開當(dāng)前路由的時候觸發(fā),有this