vue路由守衛 beforeEach、鈎子

描述：我們在開發中，經常會遇到，進入登錄頁面與主頁面的判斷，通常后台會傳回一個session來判斷，現在就考慮下有多少中方法來實現這種效果；

1.以前用的方法是直接在app.vue入口文件來判斷跳轉登錄頁面，還是主頁面，
優點：簡單明了，直接根據是否存在session來判斷入口文件是登錄還是主頁面；

缺點：體驗感不好，每次判斷前都會有登錄頁面出現一下，再跳轉主頁面，

 
2.用動態路由，判斷用戶是否登錄跳轉登錄頁面還是主頁面，判斷管理員權限，判斷頁面是否存在，不存在跳轉404頁面，
優點：能適用多鍾情況，體驗感好，

在main.js  或router.js添加

router.beforeEach((to, from, next) => {
　　console.log(store.state.token)
// to: Route: 即將要進入的目標 路由對象
// from: Route: 當前導航正要離開的路由
// next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
　　const route = ['index', 'list'];
　　let isLogin = store.state.token; // 是否登錄
// 未登錄狀態；當路由到route指定頁時，跳轉至login
　　if (route.indexOf(to.name) >= 0) {
　　　　if (isLogin == null) {
　　　　　　router.push({ path: '/login', });
　　　　}
　　}
// 已登錄狀態；當路由到login時，跳轉至home 
　　console.log(to.name)
　　localStorage.setItem('routerName', to.name)
　　if (to.name === 'login') {
　　　　if (isLogin != null) {
　　　　　　router.push({ path: '/HomeMain', });;
　　　　}
　　}
　　next();
});

 

在這里講下路由的鈎子函數：

路由鈎子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的

總體來講vue里面提供了三大類鈎子
1、全局鈎子
2、某個路由獨享的鈎子
3、組件內鈎子

1.全局鈎子
主要包括beforeEach和aftrEach,

beforeEach函數有三個參數：
to:router即將進入的路由對象
from:當前導航即將離開的路由
next:Function,進行管道中的一個鈎子，如果執行完了，則導航的狀態就是 confirmed （確認的）；否則為false，終止導航。
    afterEach函數不用傳next()函數
這類鈎子主要作用於全局,一般用來判斷權限,以及以及頁面丟失時候需要執行的操作,例如就像上面的

router.beforeEach((to, from, next) => {
console.log(store.state.token)
// to: Route: 即將要進入的目標 路由對象
// from: Route: 當前導航正要離開的路由
// next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
const route = ['index', 'list'];
let isLogin = store.state.token; // 是否登錄
// 未登錄狀態；當路由到route指定頁時，跳轉至login
if (route.indexOf(to.name) >= 0) {
if (isLogin == null) {
router.push({ path: '/login', });
}
}
// 已登錄狀態；當路由到login時，跳轉至home 
console.log(to.name)
localStorage.setItem('routerName', to.name)
if (to.name === 'login') {
if (isLogin != null) {
router.push({ path: '/HomeMain', });;
}
}
next();
});

 

2.某個路由獨享鈎子
就像說的一樣，給某個路由單獨使用的，本質上和后面的組件內鈎子是一樣的。都是特指的某個路由。不同的是，這里的一般定義在router當中，而不是在組件內。如下

 {
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系統首頁' },
beforeEnter: (to, from, next) => {

},
beforeLeave: (to, from, next) => {

}

},

 

3.組件路由
主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,這幾個鈎子都是寫在組件里面也可以傳三個參數(to,from,next),作用與前面類似.

beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}

 

最后看看官網介紹

to: Route:              //即將要進入的目標 路由對象
from: Route:          //當前導航正要離開的路由
next: Function:       //一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。
next():                  //進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false):           //中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next(‘/’)               //或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

 

最后一點，關於頁面不存在，跳轉404頁面

由於router本身的匹配是從上到下的，如果在前面找到了匹配的路由，就跳轉了。因此可以直接在最后添加404的路由，如下

let routerConfig = [{
path: '/pages',
component: App,
children: [{
path: 'demo/step1/list',
component: coupon,
name: 'coupon-list',
meta: {
title: '紅包'
}
}]
}, {
path: '*',
component: NotFound,
name: 'notfound',
meta: {
title: '404-頁面丟了'
}
}]

-----------END----------

————————————————
原文鏈接：https://blog.csdn.net/dwb123456123456/article/details/85317136