vue组件中监听或拦截窗口关闭事件
参考:Window:beforeunload 事件 - MDN
应用场景:
有时我们希望在页面关闭时做些事情,比如更新状态。vue提供的生命周期钩子无法在关闭/刷新浏览器窗口时触发。
解决方案
vue
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
onMounted(() => {
window.addEventListener('beforeunload', updateStatus)
})
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', updateStatus)
updateStatus()
})
function updateStatus() {
// 执行操作,如更新状态
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vue
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
onMounted(() => {
window.addEventListener('beforeunload', updateStatus)
})
onBeforeUnmount(() => {
window.removeEventListener('beforeunload', updateStatus)
})
function updateStatus($event) {
// 拦截窗口关闭事件
$event.preventDefault()
$event.returnValue = '确定要刷新页面吗?'
return '确定要刷新页面吗?'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18