黑马程序员技术交流社区

标题: 单页应用/vue等页面未保存刷新关闭返回等确认提示 [打印本页]

---

作者: chennaiweng    时间: 2019-1-17 19:24
标题: 单页应用/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 调用浏览器底层东西。但是效果不是很理想，在这里就不多罗列了
【转载，仅作分享，侵删】
作者：Aaron
原文：https://www.haorooms.com/post/single_page_refrashtips

---

作者: 一个人一座城0.0    时间: 2019-1-21 08:50
看一看。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2