在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'});直接跳转到首页,问题解决。

使用vue-router实现返回的更多相关文章

  1. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  2. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  3. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  4. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

  5. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  6. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  7. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  8. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  9. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  10. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

随机推荐

  1. 简单table分页

    html <table id="pagingTable"> <thead> <tr> <td> 第一列 </td> &l ...

  2. 《CS:APP》二进制炸弹实验(phase_1-3)

    <深入理解计算机系统>第三章的bomb lab,拆弹实验:给出一个linux的可执行文件bomb,执行后文件要求分别进行6次输入,每一次输入错误都会导致炸弹爆炸,程序终止.需要通过反汇编来 ...

  3. 安装zsh后出现命令行无法识别已安装的node

    安装zsh之后,在命令行输入 node -v,会出现 command not found: node. 出现原因是:使用bash输入终端指令识别得是~/.bash_profile,而安装zsh则无法识 ...

  4. sysctl -p 报错问题的解决方法

    最近执行sysctl -p 命令时一直报错,类似这种格式: error: permission denied on key...... 经过网上搜索, 原来这些问题都是因为openvz模版的问题,要进 ...

  5. .NET Core+Selenium+Github+Travis CI => SiteHistory

    前言 总是三分钟热度的我折腾了一个可以每天自动截取指定网站页面并保存到Github的项目SiteHistory,感觉挺好(每次都这样). 想知道YouTube今天的首页长啥样么?点此查看 想知道You ...

  6. jboss初体验

    本人电脑的java版本是java8,而jboss的版本最多支持到java7.x,导致启动jboss7,在浏览器无法访问localhost:8080. 于是我查找百度,发现jboss8其实就是wildf ...

  7. SVG基本形状及样式设置

    前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...

  8. 从源码分析java.lang.String.isEmpty()

    今天在写代码的时候用到了java.lang.String.isEmpty()的这个方法,之前也用过,今天突发奇想,就看了看源码,了解了解它的实现方法,总结出来,大家可以交流交流. 通常情况下,我们使用 ...

  9. Akka(24): Stream:从外部系统控制数据流-control live stream from external system

    在数据流应用的现实场景中常常会遇到与外界系统对接的需求.这些外部系统可能是Actor系统又或者是一些其它类型的系统.与这些外界系统对接的意思是在另一个线程中运行的数据流可以接收外部系统推送的事件及做出 ...

  10. JavaScript: 使用 atan2 来绘制 箭头 和 曲线

    最近搞Canvas绘图,知道了JavaScript中提供了atan2(y,x)这样一个三角函数.乍眼一看,不认识,毕竟在高中时,学过的三角函数有:sin,cos,arcsin,arccos,tan,a ...