vue-app物理返回键跳到指定页面
例如提交订单成功跳到了订单详情页面,再返回就又到了提交订单支付页面
我们需要返回到其他页面
1、挂载完成后,判断浏览器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
2、页面销毁时,取消监听。否则其他vue路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.goBack, false);
},
3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写
methods:{
goBack(){
this.$router.replace({path: '/'});
//replace替换原路由,作用是避免回退死循环
}
}
vue-app物理返回键跳到指定页面的更多相关文章
- Android 重写物理返回键,在h5页面中返回上一个界面
实现:Activity中放置webview,跳转到h5界面,点击返回键,不退出h5界面,而是返回上一个h5界面 /** * 改写物理按键--返回的逻辑,希望浏览的网页后退而不是退出浏览器 * @par ...
- vue 手机物理返回键关闭弹框
1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...
- js history对象 手机物理返回键
有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...
- cordova app 监听物理返回键
物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...
- vue里监听安卓的物理返回键
Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- js修改物理返回键功能
preventBack: function(theurl){ var pushState = window.history.pushState; //点击物理返回键时,退出到跳转定义首页 if(pus ...
- VueApp监听手机物理返回键的事件
代码 第一步创建js文件夹子 在main里面引用 JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...
随机推荐
- 映射器Mapping
1) org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping(核心) 将程序员定义的Action所对应的<bean& ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-3.在线教育站点需求分析和架构设计
笔记 3.在线教育站点需求分析和架构设计 简介:分析要开发的功能点和系统架构应该怎样架构 1.开发的功能: 首页视频列表 ...
- Kafka管理与监控——彻底删除topic
一.配置 server.properties 设置 delete.topic.enable=true 如果没有设置 delete.topic.enable=true,则调用kafka 的delete命 ...
- 转:SpringMVC 4.1 新特性(二)内容协商视图
SpingMVC的内容协商支持三种方式: 使用后缀,如json.xml后缀和处理类型的关系可以自己定义 前面说的使用Accept头 在访问时request请求的参数,比如每次请求request都会加f ...
- JAVA 程序员代码生成利器
http://www.grails.org/ 为什么要用Grails 采用groovy 开发,基于springboot+ hibernate ,groovy 语言层面运行效率稍微差点,但开发效率比j ...
- 35 个最好用 Vue 开源库
2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...
- C++ N叉树的实现
引言 最近一个项目需要使用多叉树结构来存储数据,但是基于平时学习的都是二叉树的结构,以及网上都是二叉树为基础来进行学习,所以今天实现一个多叉树的数据结构. 理论基础 树和二叉树: 多叉树:多叉树,顾名 ...
- centos7修复grub2
GRUB :“the Grand Unified Bootloader ”引导加载程序 1.主要配置文件 #/boot/grub2/grub.cfg #rm -rf /boot/grub2/grub ...
- 彻底搞懂 Elasticsearch Java API
说明 在明确了ES的基本概念和使用方法后,我们来学习如何使用ES的Java API. 本文假设你已经对ES的基本概念已经有了一个比较全面的认识. 客户端 你可以用Java客户端做很多事情: 执行标准的 ...
- 【转帖】NET 的一点历史往事:和 Java 的恩怨
NET 的一点历史往事:和 Java 的恩怨 https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654068672&idx= ...