vue中监听返回键问题


Posted in Javascript onAugust 28, 2019

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

解决方案:利用 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中监听返回键问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
a标签调用js的方法总结
Sep 05 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 #Javascript
TypeScript类型声明书写详解
Aug 28 #Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JS实现简易日历效果
2021/01/25 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
PyQt5实现下载进度条效果
2018/04/19 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python中如何进行连乘计算
2020/05/28 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
中间件的定义
2016/08/09 面试题
小区门卫岗位职责
2013/12/31 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
实习班主任自我评价
2015/03/11 职场文书
二审代理词范文
2015/05/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS