问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿

解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件

分析:pushstate 从该方法名我们可以知道 是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合  ‘栈’ 的思想);

onpopup触发返回上一页,而 pushstate仅仅是从url上进行了改变,不会校验url的内容,页面不会改变,加入当前页面为 xxx/b.html,此时pushState(null,null,'a.html'),可以发现 url变了,而页面的内容并没有改变,我们可以通过这来造成一种无法返回的假象

实施:

//注意:Dialog是一款弹窗的插件
mounted: function() {
//当前页面挂载的时候调用 返回键的监听方法
this.listeningBack() }

//当页面销毁的时候我们也要将事件监听销毁,以免影响其他内容

destroyed:function(){

window.onpopstate = null

},

methods:{

//监听返回键
listeningBack() {

var that = this;//window.onpopstate方法指向window,所以要储存一下当前的vue实例
let route = '上一页';//根据业务逻辑的上一页决定
window.onpopstate = function() {

//将当前页面window.location.href 放入页面栈当中
history.pushState({}, null, window.location.href);
Dialog.alert({
title: '标题',
message: '确认返回吗,你所填写的内容将保存为草稿'
}).then(() => {
that.$router.push({

path:route

})
}).catch(
console.log('取消返回,留在当前页面')
);


}
},

}


vue中监听返回键的更多相关文章

  1. 在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法!

    在Activity,Service,Window中监听Home键和返回键的一些思考,如何把事件传递出来的做法! 其实像按键的监听,我相信很多人都很熟练了,我肯定也不会说这些基础的东西,所以,前期,还是 ...

  2. Android WindowManager 监听返回键及home键

    一.监听home键盘,Android Home键系统负责监听,捕获后系统自动处理.有时候,我们需要监听home键处理自己的逻辑,监听方法如下: /** * 监听home键广播 */ private f ...

  3. Android必知必会-Fragment监听返回键事件

    如果移动端访问不佳,请尝试 Github版<–点击左侧 背景 项目要求用户注册成功后进入修改个人资料的页面,且不允许返回到上一个页面,资料修改完成后结束当前页面,进入APP主页. 由于是使用多个 ...

  4. 【Android】Android实现监听返回键,主键(HOME),菜单键

    目录结构: contents structure [+] 简介 监听 返回键 监听 主键(Home键) 监听 菜单键 一.简介 本篇文章介绍如何在Android中实现监听返回键,主键,菜单键.一般情况 ...

  5. Android-服务中监听电源键和Home键的广播、在锁屏下仍然工作的方法

    Android-服务中监听电源键和Home键的广播  http://blog.csdn.net/u014657752/article/details/49512485 Android开发之如何监听让服 ...

  6. Android 监听返回键退出程序的两种实现

    1.Android 双击返回键退出程序 思路:用户按下返回键时设定一个定时器来监控是否2秒内实现了退出,如果用户没有接着按返回键,则清除第一次按返回键的效果,使程序还原到第一次按下返回键之前的状态.定 ...

  7. Android监听返回键、Home键+再按一次返回键退出应用

    Android监听返回键需重写onKeyDown()方法 Home键keyCode==KeyEvent.KEYCODE_HOME @Override public boolean onKeyDown( ...

  8. Android 如何监听返回键,弹出一个退出对话框

    android 如何监听返回键点击事件,并创建一个退出对话框, 防止自己写的应用程序不小心点击退出键而直接退出.自己记录下这个简单的demo,备用. public class BackKeyTest ...

  9. android 监听返回键

    android监听返回键 public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE ...

随机推荐

  1. mona!mona!mona!

    $ PS: $ 关于\(mona\) 是只很棒的猫啦!想知道的可以自己去看\(persona5\)的游戏流程或者动画版啦. \(PPS:\) 补充一下设定啊,\(mona\)是摩尔加纳(原名)的代号啦 ...

  2. luogu3350 [ZJOI2016]旅行者

    链接 P3350 [ZJOI2016]旅行者 题目大意:给出网格图,求两点之间最短路,多组询问. \(n*m\leq10^5\ \ q\leq 10^5\) 考虑\(CDQ\)分治. 首先把询问离线, ...

  3. 安装phpredis扩展以及phpRedisAdmin工具

    先从phpredis的git拿到最新的源码包:wget https://github.com/nicolasff/phpredis/archive/master.tar.gz 然后解压到进入目录:ta ...

  4. Idea配置注释

    Idea配置注释 方法注释 点击+号 选择2 template Group 自己随便填个有意义的name(如图的mn就是我填写的) 点击你上步填写的name (我的是mn),然后点击+选择1 Live ...

  5. POJ 1797 Heavy Transprotation ( 最短路变形 || 最小生成树 )

    题意 : 找出 1 到 N 点的所有路径当中拥有最大承载量的一条路,输出这个最大承载量!而每一条路的最大承载量由拥有最大承载量的那一条边决定 分析 : 与 POJ 2253 相似且求的东西正好相反,属 ...

  6. [luogu]P1133 教主的花园[DP]

    [luogu]P1133 教主的花园 ——!x^n+y^n=z^n 题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会 ...

  7. 纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  8. 133、TensorFlow加载模型(二)

    # 选择哪个变量来保存和恢复 # 如果你没有传递任何的参数到tf.train.Saver() # 这个saver会处理计算图中所有的变量 # 每一个变量都被保存,保存的名字就是当初创建他们时候的名字 ...

  9. day22—一个AngularJS框架应用toDoList

    转行学开发,代码100天——2018-04-07 今天用AngularJS照着课程写了一个案例,即toDoList,记事清单效果. 主要实现以下效果: 1.通过文本框添加内容,同时添加事件列表.主要用 ...

  10. Shell中uname命令查看系统内核、版本

    uname命令 描述 用于打印内核名称和版本.主机名等系统信息. 用法 uname [OPTION]... 参数     用法 -a print all information -s print th ...