• vue路由守卫


    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;
        代码实现

     

     

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

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    系统测试分类与常见的系统测试方法
    测试级别
    测试对象介绍
    软件测试基本介绍
    课外作业1:将一个double类型的小数,按照四舍五入保留两位小数
    将一个double类型的小数,按照四舍五入保留两位小数.
    将一个double类型的小数,按照四舍五入保留两位小数
    安装JDK1.8以及配置环境变量的步骤
    C# .Net实现URL绝对路径和相对路径之间互相转换
    64 位win 7或windows 8下的visual studio不能连接Oracle数据库调试网站的问题
  • 原文地址:https://www.cnblogs.com/mahmud/p/11523174.html
Copyright © 2020-2023  润新知