Vue导航守卫如何拦截问卷未答完时直接关闭页面

为了避免用户在问卷尚未填写完成时直接离开页面，通常建议采用两层拦截机制，整体会更稳妥：第一层是在 Vue Router 中使用 beforeRouteLeave 导航守卫检查 isDirty 状态，一旦命中就先阻止路由跳转；第二层则通过 window.beforeunload 事件，覆盖刷新、关闭页面等所有卸载场景。再配合 sessionStorage 做草稿缓存与状态同步，问卷填写体验会更加流畅。

在问卷调查系统中，防止用户题目未答完就关闭页面、刷新网页或直接跳转，核心做法是结合 Vue Router 导航守卫与浏览器原生事件，形成两层保护：先在路由跳转前判断，再在页面卸载前进行提醒。

监听路由跳转，拦截未提交的问卷页面

针对问卷填写页面（如 /survey/:id），可以设置组件内守卫 beforeRouteLeave。当用户点击链接、执行 router.push，或使用浏览器后退功能时，该守卫都会触发，并且能够访问当前组件实例。

• 在问卷组件中，通过 data 或 computed 维护一个 isDirty 标志位（例如：表单中任意字段已修改但尚未提交）
• 在 beforeRouteLeave 中检查该状态，若为 true，则弹出确认提示框；如果用户点击“取消”，就调用 next(false) 阻止本次跳转
• 需要注意的是：该守卫无法拦截用户直接刷新页面或关闭标签页，因此必须配合下一层拦截机制使用

捕获页面卸载，防止意外刷新或关闭

仅依赖路由守卫并不足够，还需要补充 beforeunload 事件。它属于浏览器级别的钩子，能够覆盖常见退出场景，包括刷新、关闭窗口、地址栏重新输入网址，以及前进或后退操作。

• 在问卷组件的 mounted 钩子中注册监听：window.addEventListener('beforeunload', handleBeforeUnload)
• handleBeforeUnload 函数需要返回字符串（现代浏览器通常会忽略具体文案，但必须有返回值才能触发离开提示），例如：return '您还有未提交的题目，确定要离开吗？'
• 在 beforeUnmount 阶段或问卷提交成功后及时移除监听，避免出现内存泄漏或不必要的误提醒

状态同步与用户体验优化

如果只是简单弹窗提醒，用户体验往往较差，建议结合状态管理与草稿保存机制一起优化：

• 将“是否已作答”状态写入 sessionStorage，即使页面被刷新，也可以恢复问卷草稿并继续执行未完成状态拦截
• 在拦截提示中增加“保存草稿”入口（调用本地保存逻辑）后，再允许用户离开页面，会更符合实际使用习惯
• 对于已经提交成功的问卷页面，应自动移除 beforeunload 监听，并将 isDirty 重置为 false

这个方案本身并不复杂，但在实际开发中很容易被忽略：beforeunload 只能展示浏览器默认的离开提示，无法自定义弹窗样式或按钮；而 beforeRouteLeave 对应的是可控的 Vue 页面导航流程。两者配合使用，才能更完整地实现问卷未提交离开拦截。