[注]:  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 弹窗时 监听手机返回键关闭弹窗(页面不跳转)的更多相关文章

  1. javascript监听手机返回键

    javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...

  2. 知识点---js监听手机返回键,回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  3. 使用ionic开发时用遇到监听手机返回按钮的问题~

    当时用的是ionic开发一个app,需求是,当按下手机的返回按钮,在指定的页面双击退出,而在其他页面点击一次返回到上个页面: 其实用ionic自带的服务就可以解决:  //双击退出   $ionicP ...

  4. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  5. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

  6. 监听 手机back键和顶部的回退

    // 回退事件,监听 手机back键和顶部的回退 pushHistory(); window.addEventListener("popstate", function(e) { ...

  7. vue 移动端禁用安卓手机返回键

    //禁止手机返回键    下面这段代码直接复制在index.html中,可以生效// $(document).ready(function() { if (window.history &&a ...

  8. cordova app 监听物理返回键

    物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...

  9. 监听浏览器返回键、后退、上一页事件(popstate)操作返回键

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

随机推荐

  1. 百度语音识别REST API用法(含JAVA代码)——不须要集成SDK的方法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/32329457 上一篇文章http://blog.c ...

  2. postman认证使用篇(五)

    postman 认证使用篇(五) Authorization 尽管请求编辑器已经足够强大去构造各种各样的请求,但是有的时候你的请求可能是需要认证,那么就可以尝试使用下面的认证功能了(由于认证的参数信息 ...

  3. Dom4j(Dom for Java) Day24

    TestDomForJava.java package com.sxt.dom4j; import java.io.File; import java.util.Iterator; import ja ...

  4. thinkphp5.0验证码使用

    如果没有安装验证码类,可在composer.json 文件的require里面添加 "topthink/think-captcha":"1.*",然后compo ...

  5. ansible基础☞安装方法

    一 需要安装些什么 Ansible默认通过 SSH 协议管理机器. 安装Ansible之后,不需要启动或运行一个后台进程,或是添加一个数据库.只要在一台电脑(可以是一台笔记本)上安装好,就可以通过这台 ...

  6. HDU 5584 LCM Walk【搜索】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5584 题意: 分析: 这题比赛的时候卡了很久,一直在用数论的方法解决. 其实从终点往前推就可以发现, ...

  7. Java实现接口用来弥补Java单继承的缺陷

    package com.test3;/** * @author qingfeng * 功能:继承类 VS 实现接口 :两者之间的关系(实现接口用来弥补Java单继承的缺陷) */public clas ...

  8. Mysql 查询一天中每半小时记录的数量

    SELECT HOUR(e.time)as Hour,FLOOR(MINUTE(e.time)/30) as M, COUNT(*) as Count FROM error_log e WHERE e ...

  9. SSH基本原理

    SSH原理与运用:远程登录 作者: 阮一峰 年12月21日 SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不 ...

  10. Top 10 Free IT Certification Training Resources

    1. Cybrary Cybrary takes the open source concept and applies it to IT training. Many of the courses ...