Question

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

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

   }
}

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

Answer 2

这些答案仅涉及Vue中的导航。如果用户刷新页面或导航到其他站点，则不会被捕获。因此，您还需要类似：

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

Answer 3

您使用的是vue-router吗？我会调查导航卫兵。我记住了它们，但我们还没有使用它们。以下是关于它们的文档：https://router.vuejs.org/guide/advanced/navigation-guards.html

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

3 个答案: