vue监听浏览器原生返回按钮,进行路由转跳操作
更新时间：2020年09月09日 09:40:22 作者：小白阿斯兰
这篇文章主要介绍了vue监听浏览器原生返回按钮,进行路由转跳操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天测试给我报了个bug说点击浏览器返回页数据显示的不对，我查了半天原因：需要监听浏览器的回退按钮，并阻止其默认事件。
具体操作方法如下：
1、挂载完成后，判断浏览器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.cancel, false);
}
},
2、页面销毁时，取消监听。否则其他vue路由页面也会被监听
destroyed(){
window.removeEventListener('popstate', this.cancel, false);
}
3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写
cancel: function() {
if(this.orderId){
this.$router.push({
name:"orderList",
params: {id:this.orderId},
});
}else{
this.$router.go(-1);
}
},
补充知识：vue-router组件内导航守卫判断返回按钮
组件内导航守卫会出现无法拦截$router.go(-1)或者物理返回按钮，在拦截函数外包裹setTimeout即可。具体原因还未发现。
setTimeout(() => {
this.$confirm('编辑的页面布局尚未保存，确定离开？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next()
return
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
next(false)
return
})
}, 500)
以上这篇vue监听浏览器原生返回按钮,进行路由转跳操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3的Hooks是一种新的 API,本文主要介绍了Vue3+Hooks实现4位随机数和60秒倒计时的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-04-04
文章展示了基于Vue封装的标准漏斗图的代码,包括权重算法、滚轮监听和点击示例功能,旨在提供实用的图表展示技巧2025-02-02
这篇文章主要为大家分享了一份超简单的Vue.js环境搭建教程，帮助大家快速搭建vue环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了如何通过Vue实现自定义视频和图片上传的功能，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下2023-04-04
这篇文章主要介绍了Vue中的Ajax 配置代理 slot插槽的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-06-06
下面小编就为大家分享一篇基于vue-cli创建的项目的目录结构及说明介绍，具有很好的参考价值，希望对大家有所帮助2017-11-11
这篇文章主要为大家介绍了Javascript对象及Proxy工作原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
VueUse提供了一个丰富且强大的Hooks库,可以帮助开发者快速实现各种功能,提高开发效率,本文来详细的介绍一下,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue.js之VNode的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论