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

Question

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

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

   }
}

原文由 Bargain23 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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) { ... }

原文由 jpschroeder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Dirigible 发布，翻译遵循 CC BY-SA 4.0 许可协议