vue 判斷是否登入,進入不同的頁面
描述:我們在開發中,經常會遇到,進入登入頁面與主頁面的判斷,通常後臺會傳回一個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-頁面丟了'
}
}]