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

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

比如跳转页面等等。

那么问题来了,如何去不走默认返回呢。经过网上搜罗和同事交流之后,去研究了一下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. Linux:sudo,没有找到有效的 sudoers 资源。

    首先,这是因为用户的权限不够导致的. 使用 ls -l /etc/passwd 查看所有用户及权限.只有可读权限(r),说明用户的权限不够. 因此,我们可以用以下方法修改用户权限: 1. su roo ...

  2. 《DOM Scripting》学习笔记-——第二章 js语法

    <Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...

  3. 云笔记项目-AOP知识简单学习

    在云笔记项目的过程中,需要检查各个业务层的执行快慢,如登录.注册.展示笔记本列表,展示笔记列表等,如果在每个业务层方法里都写一段代码用来检查时间并打印,不仅仅显得代码重复,而且当项目很大的时候,将大大 ...

  4. Oracle一次Insert多条数据

    insert all into JK_TB_DATE (fbmmc,fgzjh,fsbmc,fsbxh,fsbbh,db_shuifenyi,db_pihao,db_wuliaobianma) ',' ...

  5. Java学习笔记(二十二):打包程序

    加入一个程序测试完毕,我们就可以将它打包,就可以放到服务器上运行了 找到左下角的终端 点击 输入命令: mvnw clean package -DskipTests=true clean:清除以前生成 ...

  6. IP路由配置之---------debugging调试

    实验设备:华三设备N台加一个PC 步骤一,打开屏幕输出开关,开启控制台对系统信息的监视功能 <H3C>terminal debugging #<H3C>terminal mon ...

  7. netty(一) netty有哪几部分构成

    netty netty是一个支持高并发的非阻塞I/O框架. Channel Channel 是 NIO 基本的结构.它代表了一个用于连接到实体如硬件设备.文件.网络套接字或程序组件,能够执行一个或多个 ...

  8. easyui 改变单元格背景颜色

    另外一种方法:https://www.cnblogs.com/raitorei/p/9989649.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...

  9. Android Studio 减小项目文件夹的大小和.gitignore文件配置

    Build --> Clean Project 可以清理出很大一部分的空间 手动删除以下文件或者目录 Dir : ProjectFolder/buildDir : ProjectFolder/a ...

  10. eclipse定制化配置调优、初始化配置指南、可以解决启动慢等问题

    配置eclipse的jvm参数 打开eclipse根目录下的eclipse.ini在最后面加上如下的jvm参数 -Xms400m -Xmx1400m -XX:NewSize=128m -XX:MaxN ...