vue处理物理返回键（Android/iOS）和浏览器返回（已完美解决）
最新推荐文章于 2024-08-16 13:39:28 发布
原创
最新推荐文章于 2024-08-16 13:39:28 发布
·
5k 阅读
·
3
·
9
·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种在Vue应用中拦截浏览器返回键的方法，通过监听popstate事件并自定义回调函数，实现对用户返回行为的控制。同时，文章还展示了如何在组件销毁时移除事件监听，以及在弹框显示时更新浏览器历史记录。
摘要生成于
C知道
，由 DeepSeek-R1 满血版支持，
前往体验 >
mounted() {
// 按需使用：在页面一进来的时候，添加一个历史记录，popstate不可修改
window.history.pushState(null, null, document.URL);
// 给 window 添加一个 popstate 事件，拦截返回键，执行 this.onBrowserBack 事件，addEventListener 需要指向一个方法
window.addEventListener("popstate", this.onReturnBack, false);
},
destroyed() {
// 页面销毁时必须要移除这个事件，vue 不刷新页面，不移除会重复执行
window.removeEventListener("popstate", this.onBrowserBack, false);
},
watch: {
// 弹框监听，当弹框显示的时候，pushState 添加一个历史，供返回键使用
PopupShow: {
handler(newVal, oldVal) {
if (newVal.Terms === true) {
window.history.pushState(null, null, document.URL);
}
},
deep: true
}
},
methods: {
onReturnBack() {
// 这里写点击返回键时候的事件
// 比如判断需求执行 back() 或者 go(-2) 或者 PopupShow=true 弹出提示框
}
}