router.beforeEach((to, from, next)

主要方法:

  • to:进入到哪个路由去
  • from:从哪个路由离开
  • next:路由的控制参数,常用的有next(true)和next(false)

首先判断进入的是否是login页面?然后再判断是否已经登陆?
已经登陆了就进入你要跳转的页面,没登录就进入login页面

为了更加明显一点,我将页面命名的简单一些,ps:

    • Login.vue是登陆页面
    • Index.vue是全局页面(包含公共导航组件)
      A.vue是普通页面(此处我做为首页)
      B.vue是普通页面
//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;
发布了316 篇原创文章 · 获赞 33 · 访问量 21万+

猜你喜欢

转载自blog.csdn.net/yz18931904/article/details/104060041