在 vue.js 中重新加载或关闭之前做一些事情答案

【问题标题】：Do something before reload or close in vue.js在 vue.js 中重新加载或关闭之前做一些事情
【发布时间】：2015-12-23 20:26:12
【问题描述】：

我有一个带有 beforeDestroy 方法的 Vue.JS 应用程序，我试图在应用程序关闭或重新加载之前将一些数据存储在本地存储中。

仅供参考：

beforeDestroy: function() {
  localStorage.setItem('preference', this.preference);
  ...
}

但是，关闭或重新加载应用程序实际上都不会调用此方法。

如何确保在应用关闭之前调用此方法？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

是什么“关闭”或“重新加载”应用程序？是浏览器中的用户关闭窗口和/或刷新页面吗？

如果是这样，什么都没有“销毁”，该函数也不会运行。

您必须在全局范围内定义 onbeforeunload 函数：

window.onbeforeunload = function(){
    return "Are you sure you want to close the window?";
}

然后您可以在 return 语句之前将项目保存到该函数内的本地存储中。

注意： 不要在您的 beforeDestroy 函数中定义它，因为同样，当您重新加载页面或导航离开时，它不会运行。

【讨论】：

【解决方案2】：

了解这个问题已经很老了，但如果我在那里寻找它，其他人就是！

不幸的是，据我所知，在用户通过关闭、CMD+R、选择新 URL 等方式重新加载页面之前，Vue 中目前没有任何东西可以挂钩。

最好的解决方案，如果它是敏感数据并且您真的希望他们考虑他们在做什么，您可以执行以下操作，取自medium post.

<script>
 export default {
      data: () => ({
    isEditing: false
  })
  beforeMount() {
    window.addEventListener("beforeunload", this.preventNav)
  },

  methods: {
    preventNav(event) {
      if (!this.isEditing) return
      event.preventDefault()
      event.returnValue = ""
    }
  }
}
</script>

这至少会弹出一个对话框，询问他们是否真的确定要重新加载页面。

请注意，对话框的文本不能更改。 StackOverflow question.

中包含对对话框文本的详细说明

【讨论】：