vue中监听返回键问题
问题：在项⽬中，我们常常有需求，当⽤户在填写表单时，点击返回的时候，我们希望加⼀个弹窗，确认离开吗，确认将保存为草稿
解决⽅案：利⽤ 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(){
},
methods:{
//监听返回键
listeningBack() {
var that = this;//popstate⽅法指向window，所以要储存⼀下当前的vue实例
let route = '上⼀页'；//根据业务逻辑的上⼀页决定
//将当前页⾯window.location.href 放⼊页⾯栈当中
history.pushState({}, null, window.location.href);
Dialog.alert({
title: '标题',
message: '确认返回吗，你所填写的内容将保存为草稿'
}).then(() => {
that.$router.push({
path:route
})
}).catch(
console.log('取消返回，留在当前页⾯')自动弹窗代码
);
}
},
}
总结
以上所述是⼩编给⼤家介绍的vue中监听返回键问题，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。