处理返回键劫持(结合vue)
在这里记录一下近期解决的一个问题
需求,在某个页面,浏览器返回按钮点击的时候,不能走浏览器的默认返回操作,而是要走自己的逻辑,
比如跳转页面等等。
那么问题来了,如何去不走默认返回呢。经过网上搜罗和同事交流之后,去研究了一下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)的更多相关文章
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- vue 用huilder打包APP时,安卓按返回键就退出App改为按两次再退出App
做vue项目时,用Hbuilder打包APP,在安卓下按返回键就是退出了APP,百度了下.都是使用到MUI来解决的,自己也记录下. 在main.js里面引入mui.js并使用. import mui ...
- vue+hbuilder监听安卓返回键问题
1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...
- vue里监听安卓的物理返回键
Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...
- vue 开发webapp 手机返回键 退出问题
vue 开发webapp 手机返回键 退出问题 mui进行手机物理键的监听 首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 在index.h ...
- vue中监听返回键
问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...
- vue 移动端禁用安卓手机返回键
//禁止手机返回键 下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...
- vue禁用浏览器返回键
mounted () { // 禁用浏览器返回键 history.pushState(null, null, document.URL); window.addEventListener('popst ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
随机推荐
- Caffe:如何将图片数据转换成lmdb文件
1 图片信息的转换 在caffe中经常使用的数据类型是lmdb或leveldb;不是常见的jpg,jpeg,png,tif等格式;因此,需要进行格式转换,通过输入你自己的图片目录(下有的大量图片)转换 ...
- jenkins Manage and Assign Roles使用
1.安装插件 Role-based Authorization Strategy 2.使用插件 3.进入 Manage and Assign Roles 配置Pattern 匹配项目, 如果要匹配 ...
- proposal-cancelable-promises
fetch 从来就没行过,最大的优势就是"新标准",但是 proposal-cancelable-promises 被 withdrawn,就导致了 fetch 发起的请求不可能被 ...
- MySQL innodb_autoinc_lock_mode 详解
innodb_autoinc_lock_mode这个参数控制着在向有auto_increment 列的表插入数据时,相关锁的行为: 通过对它的设置可以达到性能与安全(主从的数据一致性)的平衡 [0]我 ...
- git pull时解决分支分叉(branch diverged)问题
git pull时出现分支冲突(branch diverged) $ git status # On branch feature/worker-interface # Your branch and ...
- JDK中的注解简单了解
0.注解(注解是给编译器看的东东) 注解的定义方式是@Interface,注解属性定义是类似于普通类的方法定义的,注解属性赋值是使用default关键字完成的,如下图所示 注解在定义时可以给默认值,也 ...
- mui页面传值
以下代码全部在script标签内 一.通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效): mui.openWi ...
- Codeforces Round #436 A. Fair Game
题意:给你n张卡片,上面写有数字,两个人选择两个数字,把相同数字的卡片都拿走,问能不能拿走所有的卡片并且两个人拿的卡片书相同. Examples Input 411272711 Output YES1 ...
- Setting up Scatter for Web Applications
[Setting up Scatter for Web Applications] If you are still using scatter-js please move over to scat ...
- zabbix-3.4.10系列
第1节 zabbix体系架构图: