例如提交订单成功跳到了订单详情页面,再返回就又到了提交订单支付页面

我们需要返回到其他页面

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物理返回键跳到指定页面的更多相关文章

  1. Android 重写物理返回键,在h5页面中返回上一个界面

    实现:Activity中放置webview,跳转到h5界面,点击返回键,不退出h5界面,而是返回上一个h5界面 /** * 改写物理按键--返回的逻辑,希望浏览的网页后退而不是退出浏览器 * @par ...

  2. vue 手机物理返回键关闭弹框

    1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...

  3. js history对象 手机物理返回键

    有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...

  4. cordova app 监听物理返回键

    物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...

  5. vue里监听安卓的物理返回键

    Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...

  6. js监听手机端点击物理返回键或js监听pc端点击浏览器返回键

    之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...

  7. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  8. js修改物理返回键功能

    preventBack: function(theurl){ var pushState = window.history.pushState; //点击物理返回键时,退出到跳转定义首页 if(pus ...

  9. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

随机推荐

  1. 对每个CheckBox的循环

    $("input[name='ck2']").each(function(){ if(this.checked == false){ $(this).parent().parent ...

  2. Elasticsearch 空值过滤

    参考:https://blog.csdn.net/zhang862520682/article/details/80333196 参考:https://www.jianshu.com/p/7a5d70 ...

  3. 35 个最好用 Vue 开源库

    2018年度 35 个最好用 Vue 开源库 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包 ...

  4. eclipse 如何从Gitee.com克隆工程到本地,并运行

    1.再项目资源管理器里选择导入,导入 2.在导入向导中选择Git,选择来自Git的项目 3.选克隆URL 4.输入URL 和用户密码,点击下一步 4.下一步 5.选择保存路径 6.选择下一步,自动导入 ...

  5. sql次级语句

    select upper(n_id) from nrc_news;select left(n_content,1) from nrc_news;select len(n_content) from n ...

  6. [转帖]判断Linux进程在哪个CPU核运行的方法

    判断Linux进程在哪个CPU核运行的方法   原文网址:http://www.embeddedlinux.org.cn/html/xinshourumen/201601/30-5013.html 问 ...

  7. delphicbuilder10_2_1 安装破解注册

    安装程序 1.解压delphicbuilder10_2_1.iso,以管理员身份运行..\delphicbuilder10_2_1\Install\Setup.exe——选择安装语言——点击OK(推荐 ...

  8. Oracle - 子查询、TOP - N

    1 子查询 sql 中查询是可以嵌套的,一个查询的结果可以作为另外一个查询的条件.表. SELECT select_list FROM table WHERE expr operator (SELEC ...

  9. vue 简易学习

    好记性不如烂笔头 最近公司新出一个框架,采用的是前后端分离的开发方式,后端用的是springboot+mybatis(还有额外的zk.缓存.日志等待),前端采用的是vue+es6,由于以前对vue只知 ...

  10. (五)Java秒杀项目之页面优化

    一.页面缓存+URL缓存+对象缓存 1.通过加缓存来减少对数据库的访问 2.步骤: 取缓存 手动渲染模版 结果输出 3.页面缓存和URL缓存的过期时间比较短,比较适合变化不大的场景,比如商品列表页.而 ...