问卷系统防未答完离开需双重拦截：先用 Vue Router 的 beforeRouteLeave 守卫判断 isDirty 并阻止路由跳转，再用 window.beforeunload 事件覆盖刷新、关闭等所有卸载场景，配合 sessionStorage 草稿保存与状态同步优化体验。
在问卷调查系统中，防止用户未答完题目就关闭页面或跳转，核心是利用 Vue Router 的导航守卫配合浏览器原生事件，做两层拦截：路由跳转前判断、页面卸载前提醒。
监听路由跳转，拦截未提交的问卷页
对问卷填写页（如 /survey/:id）设置组件内守卫 beforeRouteLeave，它在用户点击链接、调用 router.push 或浏览器后退时触发，且能访问当前组件实例。
- 在问卷组件中，通过 data 或 computed 维护一个 isDirty 标志（例如：表单有任意字段被修改但未提交）
-
beforeRouteLeave中检查该标志，若为 true，弹出确认框；用户点“取消”则调用next(false)阻止跳转 - 注意：该守卫无法拦截直接刷新或关闭标签页，需配合下一层机制
捕获页面卸载，防止意外刷新或关闭
仅靠路由守卫不够，必须补充 beforeunload 事件——它是浏览器级钩子，覆盖所有退出场景（刷新、关闭、地址栏输入、前进/后退）。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 在问卷组件
mounted钩子中添加监听：window.addEventListener('beforeunload', handleBeforeUnload) -
handleBeforeUnload函数返回字符串（现代浏览器会忽略内容，但必须返回值才能触发提示），例如：return '您还有未提交的题目，确定要离开吗？' - 在
beforeUnmount或提交成功后移除监听，避免内存泄漏和误提示
状态同步与用户体验优化
单纯弹窗容易引起反感，建议配合状态管理提升体验：
立即学习“前端免费学习笔记（深入）”；
- 将“是否已答题”状态存入
sessionStorage，即使刷新也能恢复草稿并继续拦截 - 在拦截提示中提供“保存草稿”按钮（调用本地保存逻辑），再允许离开
- 对已提交的问卷页，自动清除
beforeunload监听，并将isDirty置为 false
不复杂但容易忽略：beforeunload 只能显示浏览器默认提示，无法自定义样式或按钮；而 beforeRouteLeave 对应的是可控的 Vue 导航流程。两者结合，才构成完整防护。
