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 相关文章推荐
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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的安全
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
python实现用户登录系统
2016/05/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
思想政治自我鉴定
2013/10/06 职场文书
报到证丢失证明
2014/01/11 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
学校安全防火方案
2014/06/07 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python