vue阻止浏览器刷新和关闭页面提示

简介: 使用场景:在使用vuex进行缓存管理时,页面的缓存会随着页面关闭而消失,如果缓存动作仍在进行中,关闭页面会导致数据丢失,此时需要阻止页面关闭
    let body = document.querySelector('body')
    window.addEventListener('beforeunload',this._beforeunloadHandler)
  }
_beforeunloadHandler(event) {
    if(this.$store.state.flow.flow.length>0){
        event.preventDefault();
         //这个值并不会修改提示,填了也没用,Google和Edge都一样
        event.returnValue =''
        return ''
    }else{
        return true
    }
}

当点击关闭页面,或者F5刷新,或者点击浏览器刷新,都会弹出该阻止框image.png

目录
相关文章
|
3月前
|
数据采集 Web App开发 JSON
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
本文以百度为实战案例演示使用WebScraper插件抓取页面内容保存到文件中。以及WebScraper用法【2月更文挑战第1天】
139 2
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
|
1月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
25 0
|
2月前
|
存储 缓存 安全
在浏览器里重复刷新一个网页,访问量计数器没有递增的原因分析
在浏览器里重复刷新一个网页,访问量计数器没有递增的原因分析
28 0
|
2月前
|
Web App开发 缓存 网络协议
|
4月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
66 0
|
16天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
19 0
|
1月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
40 1
|
4月前
|
JavaScript 前端开发 算法
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
|
4月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
473 0

热门文章

最新文章