zoukankan      html  css  js  c++  java
  • 使用vuerouter实现返回

        在vue项目中使用vue-router做路由,做到返回页面的逻辑时,由于window.history.back满足不了返回的需要,故想通过

    window.addEventListener('popstate', function(event) {}) 解决,无耐该事件执行的次数不固定,不知什么原因,反正没找出来。

        页面的跳转逻辑是,首页跳A页面,然后A页面触发事件跳转到B页面,B页面提交后再跳到A页面,这时候你点击返回按钮的时候返回的路径依次是:A->B->A->首页,而想要的效果是在最后B跳A的这个页面中,点击返回按钮跳到首页。

      假设首页的路径为'/index',A页面的路径为'/coupon',B页面的路径为'/couponAdd',实现如下:

      

           一开始是想在beforeRouteLeave中做判断,,这样判断出现问题了,如果一开始从A页面跳转到B页面的话,from.fullPath=='/coupon'&&to.fullPath=='/couponAdd' 为true,也就是它也会跳转到首页,不会跳转到B页面。然后我又想到了另外下个函数,route的beforeRouteEnter,然后在data中添加一个属性,用来做判断,,无耐它不能获取组件实例,再想。

    经过再次思考我决定用sessionStorage存储数据,代码如下:

    backFlag就是用来判断是否是从B跳转到A,如果是就把它置为true,然后在beforeRouteLeave时再判断根据该值跳转,如果它为false,说明是从A跳转到B,就跳转呗,若为true的话,说明它是从B跳转到A,然后再点击的返回,此时this.$router.push({path:'/index'});直接跳转到首页,问题解决。

  • 相关阅读:
    让文字从左到右 or 从右到左移动的效果
    pipenv创建命令
    redis笔记
    十分钟掌握pyecharts十类顶级图(亲测 饼图 ok)
    Python------pyecharts中常用的属性解释 (出现样式问题可以看看,有空研究)
    2020 python笔记
    testng参数化方法
    testng 多线程执行测试用例的方法
    xml配置文件---配置要执行的用例
    testng 断言的方法
  • 原文地址:https://www.cnblogs.com/apgy/p/7551543.html
Copyright © 2011-2022 走看看