vue Router 路由守卫之beforeEach

https://blog.csdn.net/Servenity/article/details/80605833

//列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面login；

//当直接进入登录页面login时，如果“已登录状态”，则跳转到首页home；

const router = new Router({

  routes: [

    {

      path: '/',  // 默认进入路由

      redirect: '/home'  //重定向

    },

    {

      path: '/login',

      name: 'login',

    },

    {

      path: '/home',

      name: 'home',

    },

    {

      path: '/list',

      name: 'list',

    },

    {

      path: '**',  // 错误路由

      redirect: '/home'  //重定向

    },

  ]

});

// 全局路由守卫

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

  console.log('navigation-guards');

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

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

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

  const route = ['home', 'list'];

  let isLogin = isLogin;  // 是否登录

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

  if (route.indexOf(to.name) >= 0) { 

    if (!isLogin) {

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

    }

  }

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

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

    if (isLogin) {

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

    }

  }

  next();

});

export default router;

---------------------

作者：Servenity

来源：CSDN

原文：https://blog.csdn.net/Servenity/article/details/80605833

版权声明：本文为博主原创文章，转载请附上博文链接！