Question

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

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

但是，关闭或重新加载应用程序实际上都不会调用此方法。如何在关闭应用程序之前确保调用此方法？

Answer 1

什么是'关闭'或'重新加载'应用程序？是浏览器中的用户关闭窗口还是刷新页面？如果是这种情况，则不会“销毁”任何内容，并且该功能将无法运行。您必须全局定义onbeforeunload函数：

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

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

然后您可以在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>

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

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

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

在重新加载或在vue.js中关闭之前执行某些操作

2 个答案: