[注]:  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. 好玩又实用,阿里巴巴开源混沌工程工具 ChaosBlade

    减少故障的最好方法就是让问题经常性的发生.在可控范围或环境下,通过不断重复失败过程,持续提升系统的容错和弹性能力. 那么,实施一次高效的混沌工程实验,需要几步呢? 答案:2 步. ① 登陆 Chaos ...

  2. MacOS利用Terminal访问远程Linux服务器

    常用命令 默认22端口访问 ssh x.x.x.x 指定端口访问 ssh x.x.x.x -p port 指定用户访问(默认是MacOS当前用户) ssh user@x.x.x.x [-p port] ...

  3. windows10环境运用SSH和SwitchySharp自由翱翔

    以下纯干货: 安装篇: 安装git bash(自行去找下载包) 安装xshell(开始想用它,后来直接在git bash里用命令搞定了,安装它SSH Server就可用了可能) 安装Chrome的插件 ...

  4. char和achar互转

    #pragma once#include "stdafx.h" #ifndef _Convert_H_#define _Convert_H_ //定义转换类class Conver ...

  5. Libevent:0异步IO简介

    一:异步IO简介 大多数的初级编程者都是从阻塞IO调用开始网络编程的.阻塞(同步)IO调用指的是:调用会一直阻塞,不会返回,直到发生下面两种情况之一.要么操作完成,要么经历相当长的时间,网络协议栈自己 ...

  6. docker下载容器镜像

    下载镜像的命令非常简单,使用docker pull命令即可. 在docker的镜像索引网站上面,镜像都是按照用户名/镜像名的方式来存储的. 有一组比较特殊的镜像,比如ubuntu这类基础镜像,经过官方 ...

  7. vuex之仓库数据的设置与获取

    如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...

  8. Oracle错误——引发ORA-01843:无效的月份。

    问题 引发ORA-01843:无效的月份. 解决 改动client会话日期的语言: ALTER SESSION SET nls_date_language='american';

  9. WPF Canvas实现进度条

    原文:WPF Canvas实现进度条 先看效果图: 思路: 一个Canvas做背景,一个Canvas用来显示进度,图片放在显示进度的Canvas中,靠右设置为图片本身宽度一半的距离,视觉上实现以图片中 ...

  10. DateFormat 日期格式化类(必须掌握)

    package com.sxt.utils.date1; import java.util.Date; import java.text.DateFormat; import java.text.Si ...