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中对节点进行操作的相关介绍
Apr 16 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
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中利用XML技术构造远程服务(下)
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
js函数排序的实例代码
2013/07/01 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
angular2使用简单介绍
2016/03/01 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python负载均衡的简单实现方法
2018/02/04 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python中bytes和str类型的区别
2019/10/21 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
SQL Server面试题
2016/10/17 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
后勤服务中心总经理工作职责
2014/03/03 职场文书
高三上学期学习自我评价
2014/04/23 职场文书