使用vue-router实现返回
在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实现返回的更多相关文章
- 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 ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 8. Vue - Router
一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...
随机推荐
- vue小组件练习之文字居中对齐组件
时隔多月,继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用V ...
- Git使用教程及常用命令大全
一.git命令名词解释1.添加/跟踪/暂存:添加到本地索引 git add 文件名2.提交:提交到本地仓库 git commit -m '注释'3.推送:将提交到本地仓库的所 ...
- windows转储文件(dmp)
1. 何为转储文件 转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的 ...
- 汉化Eclipse
汉化Eclipse.. ----------------- /--------------------------------link连接: 将下载的语言包解压后会有eclipse文件夹,eclips ...
- form enctype参数
application/x-www-form-urlencoded 表示在发送前编码所有字符(默认) multipart/form-data 不对字符编码.在使用包含文件上传控件的表单时,必须使用该值 ...
- Core Graphics框架
在iOS中常用的框架是Quartz 2D,它是Core Graphics框架的一部分,是一个强大的二维图像绘制引擎.我们日常开发所用到的UIKit的组件都是由Core Graphics框架进行绘制的. ...
- 【渗透课程】第二篇上-http请求协议的简单描述
HTTP协议剖析 什么是HTTP协议?如何发起请求?我认为这样讲大家能够理解: 浏览器访问网站也是http请求的一个过程.当你打开浏览器,访问一个URL (协议://服务器IP:端口/路径/文件)的时 ...
- .NET 自定义Json序列化时间格式
.NET 自定义Json序列化时间格式 Intro 和 JAVA 项目组对接,他们的接口返回的数据是一个json字符串,里面的时间有的是Unix时间戳,有的是string类型,有的还是空,默认序列化规 ...
- 为测试赋能,腾讯WeTest探索手游AI自动化测试之路
作者:周大军/孙大伟, 腾讯后台开发 高级工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 做好自动化测试从来不件容易的事情,更何况是手游的自动化测试,相比传 ...
- 移动端车牌识别ocr系统
移动端车牌识别ocr系统优点: 1.识别速度快:高度优化的车牌定位和识别算法,识别时间≤50毫秒(200万图片). 2.识别率:白天识别率≥99.7%:夜间识别率≥98%. 3.识别速度:单张图片识别 ...