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 事件进行监听返回.后退.上一页操作. 一 ...
随机推荐
- LintCode A+B问题
给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 说明 a和b都是 32位 整数么? 是的 我可以使用位运算符么? 当然可以 样例 如果 a=1 并且 b=2,返回3 1.(忽略进位 ...
- 大数据技术之Hadoop(HDFS)
第1章 HDFS概述 1.1 HDFS产出背景及定义 1.2 HDFS优缺点 1.3 HDFS组成架构 1.4 HDFS文件块大小(面试重点) 第2章 HDFS的Shell操作(开发重点) 1.基本语 ...
- oracle如何穿过防火墙连接数据库
这个问题只会在WIN平台出现,UNIX平台会自动解决. 解决方法: 在服务器端的SQLNET.ORA应类似 SQLNET.AUTHENTICATION_SERVICES= (NTS) NAMES.DI ...
- 【Leetcode链表】反转链表 II(92)
题目 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...
- springboot 自定义starter之AutoConfiguration【原】
八.自定义starter AutoConfiguration: 1.这个场景需要使用到的依赖是什么? 没有特别依赖的配置 2.如何编写自动配置 @Configuration //指定这个类是一个配置类 ...
- jenkins使用教程!
http://jenkins-ci.org/ 首先去官方下载war包,直接安装jenkins的方式比较麻烦. 下载tomcat,jdk和ant cd /optwget http://mirrors.h ...
- html5 拖放学习
html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...
- 2019-7-4-win10-uwp-处理用户点击关闭按钮
title author date CreateTime categories win10 uwp 处理用户点击关闭按钮 lindexi 2019-07-04 09:28:57 +0800 2019- ...
- 2019-4-10-VisualStudio-2019-尝试使用-C#-8.0-新的方式
title author date CreateTime categories VisualStudio 2019 尝试使用 C# 8.0 新的方式 lindexi 2019-04-10 10:41: ...
- 使用spring jpa 时,利用nativeQuery,获取数据,无需新建实体,按照别名返回Json数据
刚开始是这样写的 @Query(value = "SELECT ll.user_id id ,u.catong_img catong_img,ll.locationId location_i ...