移动端通过监听浏览器返回操作来处理一些业务逻辑。具体业务场景如下:移动端对于信息录入的页面,当用户返回上一个页面时,弹框提醒用户是否暂存当前录入的数据。如果用户确定保存当前录入的数据,则保存完数据之后返回上一个页面;如果用户取消保存则直接返回前一个页面。
遇到的问题:
1、使用vue-router的路由钩子函数beforeRouteLeave可以监听到路由的变化,当前显示的页面是未返回前的页面,但是浏览器地址栏中的路由是前一个页面的路由。
为解决以上问题,尝试js监听浏览器变化,通过改变浏览器页面历史栈的数据,来实现禁止浏览器返回,从而解决问题。
以上是发现问题及想到的解决方案。具体的实现方式是参考另一位博客的文章:
methods: {
goBack() {
console.log("点击了浏览器的返回按钮");
if (this.isPublicize) { //禁止浏览器返回
history.pushState(null, null, location.href);
this.isPublicize = false;
} else { // 可以返回的时候
this.$router.go(-1);
}
},
},
mounted() {
if (window.history && window.history.pushState) {
// 向历史记录中插入了当前页
history.pushState(null, null, location.href);
window.addEventListener("popstate", this.goBack, false);
}
},
destroyed() {
window.removeEventListener("popstate", this.goBack, false);
},