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

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

比如跳转页面等等。

那么问题来了,如何去不走默认返回呢。经过网上搜罗和同事交流之后,去研究了一下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. ENVIRONMENT

    ENVIRONMENT Generalizations Congratulations! You learned to use the bash profile to configure the en ...

  2. React Native在window下的环境搭建(二):创建新项目

    React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...

  3. proposal-cancelable-promises

    fetch 从来就没行过,最大的优势就是"新标准",但是 proposal-cancelable-promises 被 withdrawn,就导致了 fetch 发起的请求不可能被 ...

  4. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  5. # 20175213 2018-2019-2 《Java程序设计》第1周学习总结

    在本周的java学习中,我收获了很多也遇到了很多的困难1.在寒假的预学习中,因为没能完全的安好虚拟机,导致在本周的学习一开始,虚拟机就崩溃了,所以又重新开始重头安装虚拟机.但因为网速等各种问题,虚拟机 ...

  6. SQL Server error

    原因:文件没有权限 出错: TITLE: Microsoft SQL Server Management Studio------------------------------ Attach dat ...

  7. includes() 方法

    字符串的includes()和数组中的includes()判断有没有括号里面的值,有的话为true,没有为false. 详细解析:https://blog.csdn.net/wu_xianqiang/ ...

  8. 解决IE浏览器缓存导致AJAX请求数据异常

    IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面<head>标签里,加上以下声明: <!-- 解决 ...

  9. 一 分析easyswoole源码(启动服务)

    分析easyswoole源码 1以启动为例 //检查是否已经安装 installCheck();//检查锁文件是否存在,不存在结束 //启动服务 serverStart showLogo();//显示 ...

  10. yii框架 隐藏index.php 以及美化URL(pathinfo模式访问)

    首先我们分步骤来: 安装好 yii 以后  我们看到的url地址如下所示: http://www.3w.com/MyApp/backend/web/index.php?r=site%2Flogin 我 ...