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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
简单实现JS计算器功能
Dec 21 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
JS 5种遍历对象的方式
Jun 16 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php一些公用函数的集合
2008/03/27 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Python 导入文件过程图解
2019/10/15 Python
linux面试题参考答案(4)
2014/09/21 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
小区停车场管理制度
2014/01/27 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python