处理返回键劫持(结合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端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
随机推荐
- 初学JSON和AJAX心得透过解惑去学习
虽然复制代码再改参数,也能正常运作.但是看懂里面语法,就可以客制成适合你自己程序.例如录制Excel巨集,会有一些赘句,这时候整合就是很重要工作. [大纲] 时间分配 AJAX Markdown教学及 ...
- Netty4.0源码解析 NioServerSocketChannel
一.引言Netty的Channel在JDK NIO的Channel基础上做了一层封装,提供了更多的功能.Netty的中的Channel实现类主要有:NioServerSocketChannel(用于服 ...
- xml文件中&符号需要转义为&
xml文件中&符号需要转义为&
- 秦殇 xbm buffer
秦殇的图片是封装在lib文件中的, 而且格式为xbm, xbm具体的结构
- Windows驱动开发调试工具
[开发工具] VS2012 [调试工具] Windbg:和VM配合实现双机联合调试,完成双机调试功能,可以结合<软件调试>这本书对Windbg有较为深入的认识. DebugView: 可以 ...
- DB2 公共表表达式(WITH语句的使用)
----start 说起WITH 语句,除了那些第一次听说WITH语句的人,大部分人都觉得它是用来做递归查询的.其实那只是它的一个用途而已,它的本名正如我们标题写的那样,叫做:公共表表达式(Commo ...
- sys、os 模块
sys 模块常见函数 sys.argv #命令行参数List,第一个元素是程序本身路径 sys.exit(n) #退出程序,正常退出时exit(0) sys.vers ...
- est-framework框架的基本组件
rest-framework框架的基本组件 快速实例 Quickstart 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列 ...
- 时间戳转中国人能看得懂的日期格式 yy-mm-dd
很多项目都会用到时间戳的转换 说实话 我现在的这家公司超级好 因为后太要求传数据的时候竟然可以是时间戳的格式 我觉得我好幸福 哈哈哈 不过 等后台转给你数据的时候很多时候都是时间戳 这时候就得前端转 ...
- Nodejs初识随笔
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 单线程运行,不 ...