在 Vue 中离开页面之前，如何警告用户未保存的更改答案

【问题标题】：How do I warn a user of unsaved changes before leaving a page in Vue在 Vue 中离开页面之前，如何警告用户未保存的更改
【发布时间】：2017-12-30 19:44:59
【问题描述】：

我有一个 UnsavedChangesModal 作为组件，当用户在输入字段中未保存更改时尝试离开页面时需要启动该组件（我在页面中有三个输入字段）。

components: {
    UnsavedChangesModal
},
mounted() {
    window.onbeforeunload = '';
},
methods: {
   alertChanges() {

   }
}

【问题讨论】：

vue-router有beforeRouteLeave钩子
1.您也可以使用 vue 生命周期方法 - “beforeDestroy” 挂钩，并在离开页面之前添加一个弹出/dailog 框。 2.您可以使用 Vue-router BeforerouteLeave 或在路径上使用 watch 属性。

标签： javascript vue.js vuex

【解决方案1】：

假设您正在使用vue-router（并且您可能应该使用），那么您将需要使用beforeRouteLeave 保护。 The documentation 甚至给出了这种确切情况的例子：

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

可以直接在你的组件上添加：

components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }

【讨论】：

这在导航到另一个网站/关闭浏览器选项卡时是否也有效？
@ZiadAkiki 它不会为我阻止它们。
点赞！如果我不使用 Vue 路由器怎么办
如果你不使用 vue 路由器，那么你只需要绑定到窗口：window.onbeforeunload = () => 'Are you sure you want to leave?'
如果其他人读到这篇文章并想要一个工作的 Vue 示例，即使在关闭页面时也可以工作。 See this answer

【解决方案2】：

这些答案仅涵盖 Vue 中的导航。如果用户刷新页面或导航到不同的站点，则不会被捕获。所以你还需要这样的东西：

window.onbeforeunload = () => (this.unsavedChanges ? true : null);

【讨论】：

但是我们将如何在 vue.js 中使用它。可以举个例子吗
如果其他人读到这篇文章并想要一个工作的 Vue 示例see this answer。

【解决方案3】：

你在使用 vue-router 吗？我会研究导航守卫。我记住了它们，但我自己还没有使用它们。这是关于它们的文档：https://router.vuejs.org/guide/advanced/navigation-guards.html

【讨论】：

这是否可以防止刷新页面？
不想使用vue-router怎么办？
@christostsang 您可以尝试使用生命周期挂钩，例如：beforeDestory