• vue2 和 vue3 的 路由守卫


    vue2 路由守卫:

    vue-router 路由实现:
    路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。
    首先知道有3个参数 to , from, next (意义:
    to是即将要进入的目标路由对象,
    from 是当前导航即将要离开的路由对象,
    next调用该方法后,才能进入下一个钩子函数afterEach )

    next() // 直接进入to所指的路由
    next(false) // 中断当前路由
    next(‘route’) // 跳转指定路由
    next(‘error’) // 跳转错误路由

    1 全局守卫: this.$router.beforeEach((to, from, next) =>{next(); })
    执行之前触发beforeEach(to,from,next),执行后触发router.afterEach(to, from);
    
    2 路由独享守卫: this.$route.beforeEnter(to, from ,next());
    
    3 组件内部的守卫: 
    路由进入之前 beforeRouteEnter(to, from, next())
    路由更新之前 beforeRouteUpdate(to, from, next())
    路由离开之前 beforeRouteLeave(to, from, next())
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    看下示例
    vue2 中写入全局的路由守卫,一般就直接在router.index 页面完成。

    import Vue from 'vue';
    import Router from 'vue-router';
    
    Vue.use(Router)
    
    const router = new Router({
     routes: [
    	 path: '/', // 默认进入路由
    	   redirect: '/home'  //重定向
    	  },
    	  {
    	   path: '/login',
    	   name: 'login',
    	   component: LoginPage
    	  },....
    	]
     })
     
     router.beforeEach((to, from, next) => {
    	 console.log('初始化就执行全局路由守卫');
    	 // to: Route: 即将要进入的目标 路由对象
    	 // from: Route: 当前导航正要离开的路由
    	 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    
    	 const nextRoute = ['home', '....'];		
    	 let isLogin = global.isLogin; // 是否登录
    	 // 未登录状态;当路由到nextRoute指定页时,跳转至login
    	 if (nextRoute.indexOf(to.name) >= 0) { 
    	  if (!isLogin) {
    	   router.push({ name: 'login' })
    	  }
    	 }
    	 // 已登录状态;当路由到login时,跳转至home 
    	 if (to.name === 'login') {
    	  if (isLogin) {
    	   router.push({ name: 'home' });
    	  }
    	 }
    	 next();
    	});
    	// 或者这样写  全局路由守卫
    	// router.beforeEach((to, from, next) => {
        //  const isLogin = localStorage.ele_login ? true : false;
    	//   if (to.path == '/login') {
    	//    next();
    	 //  } else {
    	// 是否在登录状态下
    	//    isLogin ? next() : next('/login');
    	//  }
    	// });
    	
    	export default router;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    假设我们执行了跳转登录页面
    login.vue页面内部
    当点击登录按钮时

     handleLogin() { // 发送请求
          this.$axios
            .post("/api/posts/goxxx", {
              phone: this.phone, // 参数
              code: this.verifyCode // 参数
            })
            .then(res => {
              // console.log(res);
              // 检验成功 设置登录状态并且跳转到/
              localStorage.setItem("ele_login", true);
              this.$router.push("/"); // 进入首页
            })
            .catch(err => {
              // 返回错误信息
              this.errors = {
                code: err.response.data.msg
              };
            });
        },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    vue2独享路由守卫

    就是某一个路由所单独享用的路由守卫。

    官方定义是这样说的:你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。
    给个模拟的需求 当path路径名必须是xinxi才可以进行访问
    我们在路由页面中

    {
        name: 'xinxi',
        path: 'news', // 注意路由底层给你加了 '/' ,如果自己加 '/' 有可能还显示不出效果
        component:News,
        meta:{isAuth:true,title:'信息'},
        beforeEnter: (to,from,next)=>{
            //里面的内容跟全局前置路由守卫一样的代码
            console.log('beforeEnter',to,from,next)
            if(to.meta.isAuth){
                if(localStorage.getItem('school') === 'xinxi'){
                    next()
                }else{
                    alert('权限不够用')
                }
            }else{
                next()
            }
        }
    },
    注意 :独享路由守卫只有前置你,没有后置。独享的路由守卫可以和全局后置路由守卫配合在一起(可以随意的组合)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    组件内部守卫

      //通过路由规则进入该组件时候被调用
      beforeRouteEnter(to, from, next) {
        let data
        console.log(to, from)
        if (from.name === 'buildingDeoMonitor') {
          if (sessionStorage.getItem('navData') != null) {
            data = JSON.parse(sessionStorage.getItem('navData'))
            next(vm => {
              vm.navFormInfo.data = data
            })
          } else {
            next()
          }
        } else {
          next()
        }
      },
    
    假设我们要离开某个页面就要看是否要清除的缓存或者判断
    // 路由离开之前
     beforeRouteLeave(to, from, next) {
        // 判断要跳转哪个页面 从而清除缓存
        sessionStorage.removeItem("treelist");
        sessionStorage.removeItem("orgid");
        next();
      },
      再或者
       beforeRouteLeave(to, from, next) {
        // 判断是否提交
        if (this.action == 1) {
          // 判断往哪里跳转
          if (to.path.indexOf("dataitem") != -1) {
            if (this.issubmit > 1) {
              sessionStorage.setItem("eauForm", JSON.stringify(this.ruleForm));
              next();
            } else {
              this.ismess = true;
              this.success = 3;
              this.message = this.$t("phrase.saveEneFirst");
            }
          } else {
            next();
          }
        } else {
          next();
        }
      },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    vue2的也就结束了
    vue3 和这些几乎是一样的。唯一不同的是就是组件内部的路由守卫
    在这里插入图片描述也就是说 onBeforeRouteLeave、onBeforeRouteUpdate是vue-router提供的两个composition api,它们只能被用于setup中。

    import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
    export default {
      setup() {
         onBeforeRouteLeave((to,from)=>{//离开当前的组件,触发
            alert('我离开啦')
        })
        onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后,进行触发
            console.log(to);
        })
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    值得注意的是 路由进入之前 beforeRouteEnter并没有变,也不用写在setup内部。

    	export default defineComponent({
    	    setup() {
    	        let obj=reactive({
    	            name:'张三',
    	        })
    	        return {obj}
    	    },
    	    beforeRouteEnter(to, from, next) {
    	        console.log(to);  //上一个页面前往的的页面(当前页面)
    	        console.log(from);//来自哪一个页面
    	        next((e:any) => {
    	            // 这个回调参数e,包含setup中暴露出去的数据以及内置方法
    	            window.console.log(e)
    	            // 获取是否来自home1页面
    	            if(from.path=='/home1'){
    	                e.obj.name='李四'
    	            }
    	        })
    	    },
    	})
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    你学废了吗,欢迎指正,欢迎指正。

  • 相关阅读:
    2024年最新最全最好用的10大开源项目管理软件
    python快速构建http服务
    网络间串扰降噪推荐掌握的经验法则
    C++11——多线程
    硬件设计——串联直流稳压电源
    LQ0209 颠倒的价牌【枚举+进制】
    前端和后端分别做什么?
    Python异步编程原理篇之协程的IO
    Python进阶篇:百度指数解密【抓包|JS逆向|数据区分】
    Java 线程及线程池的创建方式
  • 原文地址:https://blog.csdn.net/lzfengquan/article/details/125403486