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

目录
相关文章
|
2月前
|
数据采集 Web App开发 JSON
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
本文以百度为实战案例演示使用WebScraper插件抓取页面内容保存到文件中。以及WebScraper用法【2月更文挑战第1天】
129 2
浏览器插件:WebScraper基本用法和抓取页面内容(不会编程也能爬取数据)
|
18天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
19天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
19 0
|
1月前
|
存储 缓存 安全
在浏览器里重复刷新一个网页,访问量计数器没有递增的原因分析
在浏览器里重复刷新一个网页,访问量计数器没有递增的原因分析
25 0
|
1月前
|
Web App开发 缓存 网络协议
|
3月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
62 0
|
6月前
|
Web App开发 前端开发 JavaScript
|
1月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
20 1
|
7月前
|
Web App开发 XML 编解码
IE浏览器下载文件中文文件名乱码问题解决
IE浏览器下载文件中文文件名乱码问题解决
85 0
|
4月前
|
Web App开发 JavaScript 前端开发
JavaScript在IE和标准浏览器下的兼容性处理
JavaScript在IE和标准浏览器下的兼容性处理
41 0

热门文章

最新文章