Vue中beforeRouteLeave跳转返回后前两页不触发的问题

问题根源 #

从外部网站重定向回你的站点时，浏览器原生history栈中会保留外部站点的访问记录。前两次点击返回按钮时，浏览器实际是在回溯这些外部站点的历史，并未触发Vue Router的路由切换，因此beforeRouteLeave钩子不会执行；第三次点击后，才进入Vue Router管理的路由栈范围，钩子恢复正常触发。

解决方案 #

1. 同步路由栈与浏览器history记录 #

在外部重定向回来的第一个页面（第一页）的mounted钩子中，用history.replaceState替换当前history记录，消除外部站点的历史干扰，确保后续返回操作都在Vue路由控制范围内：

mounted() {
  // 替换当前history条目，避免返回时跳转到外部站点
  if (window.history.length > 1) {
    window.history.replaceState(null, document.title, window.location.href);
  }
}

2. 全局监听popstate事件补充拦截 #

如果仅同步history栈仍有问题，可全局监听浏览器的popstate事件，手动处理前两次返回的拦截逻辑。在App.vue中添加以下代码：

created() {
  window.addEventListener('popstate', this.handleBrowserBack);
},
beforeUnmount() {
  window.removeEventListener('popstate', this.handleBrowserBack);
},
methods: {
  handleBrowserBack() {
    const currentRouteName = this.$router.currentRoute.name;
    // 针对需要拦截的页面（第一页、第二页）做判断
    if (['FirstPage', 'SecondPage'].includes(currentRouteName) && !this.allowExitRoute) {
      if (!confirm('确定要离开当前页面吗？')) {
        // 阻止返回，重新push当前状态到history栈
        window.history.pushState(null, document.title, window.location.href);
      } else {
        this.allowExitRoute = true;
      }
    }
  }
}

3. 优化页面跳转时的状态控制 #

在第一页跳转到第二页的方法中，确保allowExitRoute状态正确传递，同时在第二页的mounted钩子中再次同步history栈：

// 第一页跳转方法（保持原逻辑）
redirectToSecondPage() {
  this.allowExitRoute = true;
  this.$router.push('/secondPage');
}

// 第二页mounted钩子
mounted() {
  window.history.replaceState(null, document.title, window.location.href);
}

关键说明 #

你提到控制台执行history.pushState能触发beforeRouteLeave但mounted中不行，是因为mounted阶段Vue Router的路由初始化尚未完全完成，此时操作history栈不会触发路由钩子；而控制台执行时页面已完全加载，路由栈稳定，因此能正常触发钩子。

内容的提问来源于stack exchange，提问作者Eduardo H.