vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态)
vue中用路由守卫来做是否登陆判断,此处我以后台管理项目为例,如下图:
主要方法:
- to:进入到哪个路由去
- from:从哪个路由离开
- next:路由的控制参数,常用的有next(true)和next(false)
首先判断进入的是否是login页面?然后再判断是否已经登陆?
已经登陆了就进入你要跳转的页面,没登录就进入login页面
为了更加明显一点,我将页面命名的简单一些,ps:
- Login.vue是登陆页面
- Index.vue是全局页面(包含公共导航组件)
A.vue是普通页面(此处我做为首页)
B.vue是普通页面 - 404.vue是走丢了的404页面
//router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); const children = [ { path: 'a', name: 'a', component: () => import('./views/A.vue'), meta: { title: 'a页面', keepAlive: false // 无缓存 } }, { path: 'b', name: 'b', component: () => import('./views/B.vue'), meta: { title: 'b页面', keepAlive: true // 有缓存 } }, { path: '404', name: '404', component: () => import('./components/404.vue') } ]; const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', redirect: '/a' }, { path: '*', redirect: '/404' }, { path: '/login', name: 'login', component: () => import('./components/Login.vue') }, { path: '/', component: () => import('./components/Index.vue'), //index是上图左边的公共菜单 children //此处是站内页面,页面在右侧container里展示 } ] }); router.beforeEach((to, from, next) => { const isLogin = sessionStorage.getItem('isLogin'); //获取本地存储的登陆信息 if (to.name == 'login') { //判断是否进入的login页 if (isLogin == "true") { //判断是否登陆 next({ name: 'a'}); //已登录,跳转首页(a页面) } else { next(); //没登录,继续进入login页 } } else { //如果进入的非login页 if (isLogin == "true") { //同样判断是否登陆 next(); //已登录,正常进入 } else { next({ name: 'login'}); //没登录,跳转到login页 } } }); export default router;