(1)引用事件beforeunload(刷新和关闭页面之前)、unload(刷新和关闭页面之后)
(2)在onMounted、onUnmounted进行引用和卸载
(3)beforeunload事件中记录时间和加入弹框进行判断
(4)unload事件中要fetch处理(异步)(在该函数中不能进行跳跃)
// 1
onMounted(() => {
window.addEventListener("beforeunload", beforeHandler, false)
window.addEventListener("unload", FnName, false)
})
// 2
function beforeHandler(e) {
// 时间
beforeTime.value = new Date().getTime();
// 弹框判断
e = e || window.event;
e.returnValue = ''
return '关闭提示'
}
// 3
function FnName() {
const userAnswerList = {
……
};
const url = import.meta.env.VITE_APP_BASE_API + '/practice/practiceMark'
fetch(url, {
method: 'POST',
headers: updaeFetchHeaders(userAnswerList),
body: JSON.stringify(userAnswerList),
keepalive: true
})
}
// 4
onUnmounted(() => {
window.removeEventListener("beforeunload", beforeHandler, false)
window.removeEventListener("unload", FnName, false)
});