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

Question

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

仅供参考：

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

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

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

Answer 1

“关闭”或“重新加载”应用程序的原因是什么？是浏览器关闭windowand/or刷新页面的用户吗？

如果是这种情况，则不会“被破坏”，并且该函数不会运行。

您必须全局定义一个 onbeforeunload 函数：

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

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

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

Answer 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>

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

请注意，对话框的文本无法更改。此 Whosebug question.

中包含对对话框文本的详细描述

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

Do something before reload or close in vue.js

javascript

vue.js