當前頁面所支持的語言：
简体中文浏览器原生API：beforeunload事件玩法
FrontendBest Practice
# Note
字數 682
大約耗時 3 minutes
2026年3月26日週四 15:14:00 [UTC]
为了在标签页刷新或关闭时显示自定义提示框，以免用户误操作导致数据丢失，我们可以使用 beforeunload 事件来做提醒。
相关MDN文档
示例（VueUse）
在需要监听标签页刷新或关闭的页面中，添加代码：
demo.ts
import { useEventListener } from '@vueuse/core'
// 监听标签页刷新&关闭
useEventListener('beforeunload', event => {
// 浏览器自带提示
event.preventDefault()
// Chrome浏览器要求必须调用
event.returnValue = ''
})