如何阻止浏览器前进导航？beforeunload失效及路由历史问题

针对Inertia路由环境下，表单未保存（dirty）状态无法拦截浏览器前进操作的问题，可通过结合Inertia导航钩子与原生事件监听实现完整拦截，具体步骤如下：

1. 维护表单dirty状态 #

先定义变量跟踪表单是否有未保存修改：

let isFormDirty = false;

// 示例：监听表单输入，标记为dirty
document.querySelector('#your-form').addEventListener('input', () => {
  isFormDirty = true;
});

2. 用Inertia全局导航钩子拦截所有导航 #

Inertia提供了before钩子，可拦截所有由它处理的导航（包括浏览器前进/后退触发的导航），这是最关键的拦截点：

Inertia.on('before', (event) => {
  if (isFormDirty) {
    const confirmLeave = confirm('未保存的数据将丢失，确定要继续吗？');
    if (!confirmLeave) {
      event.preventDefault(); // 阻止Inertia执行导航
    } else {
      isFormDirty = false; // 用户确认后重置状态
    }
  }
});

3. 保留beforeunload处理刷新/关闭场景 #

继续维护原生beforeunload事件，处理页面刷新、关闭浏览器的情况：

window.addEventListener('beforeunload', (event) => {
  if (isFormDirty) {
    event.preventDefault();
    event.returnValue = ''; // 部分浏览器需要此属性才能显示提示
  }
});

4. 补充popstate兜底拦截 #

若存在浏览器前进操作绕过Inertia钩子的极端情况，可通过popstate事件兜底处理：

window.addEventListener('popstate', (event) => {
  if (isFormDirty) {
    const confirmLeave = confirm('未保存的数据将丢失，确定要继续吗？');
    if (!confirmLeave) {
      // 回退到当前历史记录，抵消前进/后退操作
      history.go(-(event.state?.direction || 0));
    } else {
      isFormDirty = false;
    }
  }
});

5. 重置dirty状态的时机 #

在表单提交成功、用户主动重置表单时，记得重置isFormDirty：

// 表单提交成功后重置
document.querySelector('#your-form').addEventListener('submit', () => {
  isFormDirty = false;
});

// 重置按钮点击时重置
document.querySelector('#reset-btn').addEventListener('click', () => {
  isFormDirty = false;
});

关键说明 #

之前单独使用popstate无效，是因为Inertia会在popstate触发后自行处理导航逻辑，仅监听popstate无法阻止Inertia的跳转行为。而Inertia的before钩子是导航的统一拦截入口，能覆盖所有路由触发场景。

内容的提问来源于stack exchange，提问作者RawSlugs