vue h5控制浏览器返回_vue监听页面返回

移动端通过监听浏览器返回操作来处理一些业务逻辑。具体业务场景如下：移动端对于信息录入的页面，当用户返回上一个页面时，弹框提醒用户是否暂存当前录入的数据。如果用户确定保存当前录入的数据，则保存完数据之后返回上一个页面；如果用户取消保存则直接返回前一个页面。

遇到的问题：

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);
  },

vue 控制浏览器返回 防止返回_vue 禁止返回_哆比哆比的博客-CSDN博客