vue3如何在特定时刻拦截页面刷新, 比如上传文件时 如果用户刷新 弹出提示禁止刷新?

Question

vue 上传文件时 如何禁止用户刷新页面 并提示？ 是只有上传文件时 触发这个事件
求大神解答.. 跪谢...

Answer 1

提供个思路可以试一下，upload的时候 增加监听
用的这个api https://developer.mozilla.org...

const preventDeault = () => {
   retrun '正在上传，请勿刷新'
}

// 上传的时候监听
window.addEventListener('beforeunload', preventDeault);
// 上传完成后 取消监听

Answer 2

这个功能应该要用 window.onbeforeunload 监听浏览器的刷新事件

window.onbeforeunload = function (e) {
    if (condition) {
        return '提示'
    } else {
        window.onbeforeunload = null
    }
}

然后，在销毁组件的时候，释放这个事件就行了。