处理返回键劫持(结合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端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
随机推荐
- com.mysql.jdbc.Connection.isValid(I)Z
spring boot项目 运行提示这个错误的时候 只需要配置
- mysql创建索引以及对索引的理解
创建表的时候创建索引 创建索引是指在某个表的一列或多列上建立一个索引,以便提高对表的访问速度.创建索引有3种方式,这3种方式分别是创建表的时候创建索引.在已经存在的表上创建索引和使用ALTER T ...
- Nginx 工作原理
Nginx 工作原理 Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此locat ...
- 人人开源框架使用 renren fast
参考地址人人开源官网: https://www.renren.io/guide/ 1.介绍 1.1.项目描述 renren-fast 是一个轻量级的 Spring Boot 快速开发平台,能快速开发项 ...
- [leetcode]50. Pow(x, n)求幂
Implement pow(x, n), which calculates x raised to the power n (xn). Example 1: Input: 2.00000, 10 Ou ...
- [leetcode]16. 3Sum Closest最接近的三数之和
Given an array nums of n integers and an integer target, find three integers in nums such that the s ...
- stark组件开发之分页
""" 分页组件 """ class Pagination(object): def __init__(self, current_page ...
- 31.Mysql复制
31.Mysql复制复制是指将主数据库的DDL和DML操作通过二进制日志传到从数据库上,然后在从数据库上对重做日志,从而使从库与主库保持同步.Mysql支持一台主库同时向多台从库复制,从库也可以作为其 ...
- OSI网络七层协议+火了火了火
因为部门新进了一台价值百万的网络测试设备,所以有太大的必要了解有关网络相关的基础知识了. 网络七层协议OSI(open system interconnection)从上到下依次为:应用层.表示层.会 ...
- SSRF绕过filter_var(),preg_match()和parse_url()
1.利用curl的变量解释符$ php版本 利用代码 /*ssrf.php*/<?php echo ]."n"; // check if argument is a vali ...