vue 弹窗时 监听手机返回键关闭弹窗(页面不跳转)
[注]: popstate 事件
a.当活动历史记录条目更改时,将触发popstate事件。
b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,
popstate事件的state属性包含历史条目的状态对象的副本。
c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。
d.只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())
具体代码:
1. 配置路由 meta 的 keepAlive 属性 , 再App中 使用 keep-alive 标签 将当前页面加入缓存中


2. 打开弹窗调用 window.history.pishState() 函数

3. activated生命周期 监听popstate 事件 ,deactivated 生命周期 移除popstate事件

4. 配置事件监听函数

vue 弹窗时 监听手机返回键关闭弹窗(页面不跳转)的更多相关文章
- javascript监听手机返回键
javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...
- 知识点---js监听手机返回键,回到指定界面
方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...
- 使用ionic开发时用遇到监听手机返回按钮的问题~
当时用的是ionic开发一个app,需求是,当按下手机的返回按钮,在指定的页面双击退出,而在其他页面点击一次返回到上个页面: 其实用ionic自带的服务就可以解决: //双击退出 $ionicP ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- vue+hbuilder监听安卓返回键问题
1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...
- 监听 手机back键和顶部的回退
// 回退事件,监听 手机back键和顶部的回退 pushHistory(); window.addEventListener("popstate", function(e) { ...
- vue 移动端禁用安卓手机返回键
//禁止手机返回键 下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...
- cordova app 监听物理返回键
物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...
- 监听浏览器返回键、后退、上一页事件(popstate)操作返回键
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
随机推荐
- $.ajax中contentType: “application/json” 的用法
不使用contentType: “application/json”则data可以是对象 $.ajax({ url: actionurl, type: "POST", datTyp ...
- LeetCode141 Linked List Cycle. LeetCode142 Linked List Cycle II
链表相关题 141. Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can y ...
- 公司电脑安装mysql出现小问题
按步骤将mysql安装好后,在自己电脑完全没问题,但是在公司电脑安装的时候出现了这样的问题. 查阅资料以后,找到了问题: 参考链接:https://blog.csdn.net/huacode/arti ...
- 小爬爬5:重点回顾&&移动端数据爬取1
1. ()什么是selenium - 基于浏览器自动化的一个模块 ()在爬虫中为什么使用selenium及其和爬虫之间的关联 - 可以便捷的获取动态加载的数据 - 实现模拟登陆 ()列举常见的sele ...
- hdu 3466 01背包变形【背包dp】
http://acm.hdu.edu.cn/showproblem.php?pid=3466 有两个物品P,Q,V分别为 3 5 6, 5 10 5,如果先dp第一个再dp第二个,背包容量至少要为3+ ...
- SSH applicationContext.xml import异常
近期在项目上,遇到了一个问题.在配置applicationContext.xml使用<import>标签引入其他的xml文件时,导致项目启动时过慢.有时还会引起启动异常.后来查到是xml文 ...
- AT3728 Squirrel Migration
AT3728 Squirrel Migration 就是给每个点分配两个匹配点(自环除外) 考虑最大值 考虑极限情况:每个边的贡献是min(sz[u],sz[v])*2 证明存在方案: 发现,如果哪边 ...
- 在laravel框架中使用ajax请求报错419
laravel框架中报419 419 unknown status 这个时候你需要将这个接口放到api路由上,这样可以跳过CSRF的检查
- MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数
MySql计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数 计算两日期时间之间相差的天数,秒数,分钟数,周数,小时数,这里主要分享的是通过MySql内置的函数 TimeStampDiff() ...
- HashMap的运用 计算3个班级的总成绩和平均成绩
TestStudent.java package com.sxt.home; import java.util.ArrayList; import java.util.HashMap; import ...