vue地址栏输入路由跳转到首页_Vue路由守卫，未登录时跳转到登录界面，已登录跳转到主页...

实现的功能：

1.未登录时跳转到登录界面，已登录跳转到主页

2.限制手动进入主页

使用方法 ：

1.将const nextRoute数组中的路由替换成需要登录权限的路由

2.isLogin是你获取到的登录状态，更改即可

// 全局路由守卫

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

// to: Route: 即将要进入的目标 路由对象

// from: Route: 当前导航正要离开的路由

// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

const nextRoute = [ 'temp','editTemplate','plugin','toolList','templateList','template','workflow','workflowList','sysmanage','addWorkflow'];

let isLogin=localStorage.getItem('token');

// 未登录状态；当路由到nextRoute指定页时，跳转至login

if (nextRoute.indexOf(to.name) >= 0 && !isLogin) {

next({

path: '/login',

// 将跳转的路由path作为参数，登录成功后跳转到该路由

query: {redirect: to.fullPath}

})

}else{

next();

}

// 已登录状态；当路由到login时，跳转至home

if (to.name === 'login') {

if (isLogin) {

console.log('已登录');

router.push({ path: '/temp/index' });

}

}

});

export default router;

本文来源于网络：查看 >https://blog.csdn.net/qq_40292164/article/details/83009780