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.全局鉤子
主要包括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