vue-router vue-x 实现状态改变 拦截路由

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录（建议用vuex）；

import Vue from ' vue '

import Vuex from ' vuex '

Vue. use( Vuex);

var state = {

token: 0,

// 初始时候给一个 token=0 表示用户未登录

};

const mutations = {

change( state, data){

state. token = data;

}

};

二丶在用户登录时改变登录状态；

this. $store. commit( ' change ', ' 1 ') // 登录后改变登录状态 token = 1 ；

三、设置需要校验的路由

{ path: ' /home ',

name: " home ",

meta: { requireAuth: true}, // 添加该字段，表示进入这个路由是需要登录的

}

四、路由跳转校验

router. beforeEach(( to, from, next) => {

if( to. matched. some( m => m. meta. auth)){

// 对路由进行验证

if( store. state. login == ' 1 ') { // 已经登陆

this. $router. push({ path: ' /home ',}); // 正常跳转到你设置好的页面

} else{

// 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；

this. $router. push({ path: ' /login ',});

　　　　　}

　　　　} else{

　　　　　　 next()

　　}

})