停止销毁vue.js组件，因为存在未保存的更改

Question

我正在使用vuejs。我有一个用户可以保存数据的组件。但是用户可能没有保存数据，并且他试图导航到其他路线或破坏组件。我想显示一条消息，表示存在未保存的数据，用户确实希望保留未保存的数据。

如果用户说他不想留下未保存的数据，那么我必须停止导航或组件的销毁。我正在使用beforeDestroy检查是否有未保存的数据并且它可以正常工作，但我无法停止销毁组件或导航。我尝试使用beforeRouteLeave但它不起作用。关于如何使这项工作的任何想法？

Answer 1

嗯，我知道，你确定以这种方式使用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)
  }
}

  

键是下一个（错误）

您需要在false中传递next()作为参数，以便它不会转发到下一条路线。

只需要检查它是否正确使用。