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

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

比如跳转页面等等。

那么问题来了,如何去不走默认返回呢。经过网上搜罗和同事交流之后,去研究了一下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. 尚硅谷springboot学习24-错误处理

    1.SpringBoot默认的错误处理机制 默认效果: ​ 1).浏览器,返回一个默认的错误页面

  2. keil mdk5安装

  3. git配置正确且权限已开但是pull或push提示无权限

    因为之前提示输入用户名和密码时输入错误,之后就一直权限认证失败.这种情况下在git bash中输入: git config --system --unset credential.helper 就会重 ...

  4. Apache无法正常启动(配置多个监听端口)

    Apache监测多个端口配置: 1.conf->extra->httpd-vhosts.conf  检查配置项是否写错 2.http.conf listen端口是否监听正确 3.环境变量中 ...

  5. short s1 = 1; s1 = s1 + 1;和 short s1 = 1; s1 += 1;的问题,终于弄懂了

    对于short s1 = 1; s1 = s1 + 1; 由于s1+1运算时会自动提升表达式的类型,所以结果是int型,再赋值给short类型s1时,编译器将报告需要强制转换类型的错误. 对于shor ...

  6. Newtonsoft.Json反序列化(Deserialize)出错:Bad JSON escape sequence

    使用Newtonsoft.Json反序列化收到的字串为JObject或其它支持的数据模型,有时错误,提示如下: Bad JSON escape sequence: \c. Path , positio ...

  7. vm ware虚拟机ping不通解决办法

    本人是linux菜鸟,在使用vm ware的时候,在多台电脑上安装了多个虚拟机,这多台电脑是同一网段的,并且能够互相ping通,但是vm ware下的虚拟机就无法ping通 通过自己的各种才是,发现在 ...

  8. C#跨窗体传值的几种方法分析(很详细)

    创建一个Winform窗体应用程序项目,然后添加一个Form2窗体. 在Form1和Form2中各添加一个textBox和button: 单击Form1中的button1,弹出Form2,然后要做的就 ...

  9. vue修改端口号

    vue修改端口号   默认端口号 修改端口号 重新启动项目 npm run dev        

  10. ionic3搭建笔记及编译成apk

    一.安装node.js 二.安装Ionic2 npm install -g ionic (安装最新版本) ionic -v //查看版本号(是否安装成功) npm uninstall -g ionic ...