单页应用/vue等页面未保存刷新关闭返回等确认提示

Posted 黑猫之家

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单页应用/vue等页面未保存刷新关闭返回等确认提示相关的知识,希望对你有一定的参考价值。

前言

单页应用,例如vue,react,项目中有些编辑页面不是时时保存的。用户做了半天,刷新了页面,或者关闭了页面,就需要重新制作。因此,刷新,返回,关闭页面的时候进行用户提示,显得很重要。但是这个单页应用,用户在刷新、关闭、历史返回中如何制作呢?这个问题,我很久之前就做过,只是感觉效果不尽如人意。因此也一直没有在博客中写相关文章。今天简单总结一下我的一些解决方案。假如大家有更好的方案,欢迎交流!

vue 路由守卫

刚刚查看了一下最先版本的Vue Router 官方文档,比以前的文档详细了一些。新版的Vue Router文档中,很详细的写了组件内的守卫,

最后提到了如下方法:

beforeRouteLeave (to, from , next) {  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')  if (answer) {    next()  } else {    next(false)  }}

文档中说,这个方法常用来禁止用户在还未保存修改前突然离开。

但是,这个组件内的守卫,监听不了浏览器关闭,浏览器刷新。只能监听到历史返回啊~~~

这,这,不是我想要的效果!

我要的效果是能监听到浏览器关闭、刷新以及浏览器历史返回等。

其他方法

针对这种情况,只能用我很久以前用过的方式了,onbeforeunload ,就是我以前文章写得js关闭浏览器事件,只能用这个方法来监听浏览器关闭和刷新了。

MDN上,关于onbeforeunload是如下这么示例的:

window.onbeforeunload = function (e) {  e = e || window.event;  // 兼容IE8和Firefox 4之前的版本  if (e) {    e.returnValue = '关闭提示';  }  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+  return '关闭提示';};

假如你在单页应用vue 的mounted()中,直接写了上了上面那段!

那么问题来了。

问题一

你会发现谷歌浏览器机制修改了,你的关闭提示,相关文字死活没有生效,而是出现如下如:

问题二

你的页面是单页应用, window.onbeforeunload 在window下面,当你页面切换的时候,你不想提示的页面也会出现如上图的那种系统提示!

针对这两个问题,如何解决呢?

我的解决方案

问题二非常好解决,根据路由判断一下就可以了。例如当前路由是“/layout/add”,判断如下:

    let _this = this    window.onbeforeunload = function (e) {      if(_this.$route.fullPath =="/layout/add"){          e = e || window.event;          // 兼容IE8和Firefox 4之前的版本          if (e) {            e.returnValue = '关闭提示';          }          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+          return '关闭提示';      }else{        window.onbeforeunload =null      }};

其他页面就不会出现了,仅仅在/layout/add这个页面出现提示。

问题一解决:

问题一比较棘手。目前其实没有很好的解决方案,因为beforeunload弹框没有办法美化。

我尝试用webAssenby 和WshShell 调用浏览器底层东西。但是效果不是很理想,在这里就不多罗列了。

假如有小伙伴有好的解决方案,欢迎留言指教,谢谢!


以上是关于单页应用/vue等页面未保存刷新关闭返回等确认提示的主要内容,如果未能解决你的问题,请参考以下文章

vue单页应用前进刷新后退不刷新方案探讨

vue切换路由不会刷新页面就是巨大的优点吗?

前端 关闭浏览器或者刷新浏览器的时候,如果页面有未保存的信息,做出提示

Vue单页应用,前进刷新后退不需要刷新

我在 vuejs 单页应用程序上刷新页面

基于VUE的SPA单页应用开发-加载性能篇