在这里记录一下近期解决的一个问题

需求,在某个页面,浏览器返回按钮点击的时候,不能走浏览器的默认返回操作,而是要走自己的逻辑,

比如跳转页面等等。

那么问题来了,如何去不走默认返回呢。经过网上搜罗和同事交流之后,去研究了一下history的原理及

相关关键操作:

我们在需要操作的页面进来的时候push一条state,那么浏览器返回的时候就走到了你原页面,这个时候

去监听hashchange或者popstate事件然后做出对应的逻辑处理

看看我在vue里面是怎么处理的

这里的recharge1和recharge是同一个组件,只是用了不同的path做区分而已,在beforeRouteEnter的hook里面

对 from 的路由信息进行判断,如果balabala就balabala(自己看代码)。

===================================================================================

如果抛除vue去看这个问题的话也同理,可以push一个state,把url的hash改掉,接着去监听hashchange

window.addEventListener("hashchange",function(){},false);

这个时候点返回按钮就会触发hashchange事件,然后你就可以在回调里面做自己想做的逻辑了。

处理返回键劫持(结合vue)的更多相关文章

  1. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  2. vue 用huilder打包APP时,安卓按返回键就退出App改为按两次再退出App

    做vue项目时,用Hbuilder打包APP,在安卓下按返回键就是退出了APP,百度了下.都是使用到MUI来解决的,自己也记录下. 在main.js里面引入mui.js并使用. import mui ...

  3. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

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

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

  5. vue 开发webapp 手机返回键 退出问题

    vue 开发webapp 手机返回键 退出问题 mui进行手机物理键的监听 首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 在index.h ...

  6. vue中监听返回键

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...

  7. vue 移动端禁用安卓手机返回键

    //禁止手机返回键    下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...

  8. vue禁用浏览器返回键

    mounted () { // 禁用浏览器返回键 history.pushState(null, null, document.URL); window.addEventListener('popst ...

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

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

随机推荐

  1. spring mvc返回json格式和json字符串

    首先有必要说一下,json和json字符串是不一样的,后者是一个字符串.而json是一个对象 当然如果调用位置是后台程序这几乎没有区别,因为在后台,无论什么格式数据,都是从响应流中读取字符串. 但是在 ...

  2. javascript中正则表达式中的 match,exec,test,replace 之我理解

    这个正则 ($&) 的语法: https://msdn.microsoft.com/library/3k9c4a32(v=vs.94).aspx 在ECMAScript中对这几个的说明: ma ...

  3. Linux下常用系统分析工具总结(转)

    1.1 top top命令可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具. Top常用的可选参数和其对应的含义如下: (1)-c:显示完整的命令: (2)- ...

  4. CheckBox获取一组及全选

    获取一组CheckBox: jQuery: $(function () { $("input[name=names]").click(function () { //获得所有的na ...

  5. Jenkins安装时Web页面报错提示离线安装

    先跳过所有. 方法1 先看它的提示:”参考离线Jenkins安装文档“发现链接点不开,我还以为是被墙了呢,FQ以后还是打不开.看来这个参考文档是没有用滴.点击配置HTTP代理跳出如下界面:安装Jenk ...

  6. nginx实现http www服务的方式

  7. 100-days: eighteen

    Title: Why India's election is among the world's most expensive election n.选举,当选,选举权 expensive adj.昂 ...

  8. stark组件开发之关键搜索

    - 模糊搜索: 在页面生成一个表单.  以get 方式, 将数据提交到.当前查看页面. 后台接收数据,然后进行筛选过滤. 着个也需要,用户自定制!   定义一个  search_list  这个值,默 ...

  9. bootstrap 辅助工具

    模板  https://startbootstrap.com/ 可视化bootstrap在线编辑器 https://www.layoutit.com/

  10. [模板]LCA

    洛谷P3379 注意:不能与LCA搞混(打久了就会发现两个还是有很大区别的) 位运算一定要加括号! for循环从0到logn还是从logn到0看当前的状态更适合哪种 第53行预处理一定要注意!(因为没 ...