Vue Router禁用浏览器前后导航并添加退出警告的方法

你可以通过结合浏览器事件监听和Vue Router守卫的方式，实现用户离开时的警告提示：

1. 拦截页面卸载事件（处理浏览器后退离开场景） #

当内存历史栈耗尽，用户点击后退会触发浏览器页面卸载，此时监听beforeunload事件来弹出警告：

// 在测验页面组件或全局入口文件中添加
const handleBeforeUnload = (e) => {
  // 取消默认行为，触发浏览器提示
  e.preventDefault();
  // 兼容不同浏览器的提示文本设置（部分浏览器会强制使用系统默认文案）
  e.returnValue = "你还有未完成的测验，确定要离开吗？";
  return "你还有未完成的测验，确定要离开吗？";
};

// 挂载时添加监听
window.addEventListener('beforeunload', handleBeforeUnload);

// 测验完成后移除监听（避免后续页面触发不必要提示）
// window.removeEventListener('beforeunload', handleBeforeUnload);

2. 配合Vue Router守卫（处理应用内导航场景） #

如果需要拦截应用内的跳转操作（比如用户通过其他路由链接离开测验页），可以添加路由守卫：

全局路由守卫（适用于所有测验页面） #

router.beforeEach((to, from, next) => {
  // 根据你的路由配置，判断当前是否在测验页面
  if (from.meta.isQuizPage) {
    const confirmLeave = window.confirm("你还有未完成的测验，确定要离开吗？");
    confirmLeave ? next() : next(false);
  } else {
    next();
  }
});

页面级路由守卫（单个测验页面） #

在测验页面组件内直接添加：

beforeRouteLeave(to, from, next) {
  const confirmLeave = window.confirm("你还有未完成的测验，确定要离开吗？");
  confirmLeave ? next() : next(false);
}

注意事项 #

• 部分浏览器会限制自定义提示文本，最终显示的文案可能为系统默认内容；
• 务必在用户完成测验后移除beforeunload监听，避免影响后续操作。

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