vue实现表单未编辑或未保存离开

在 Vue 中，可以使用 beforeRouteLeave 导航守卫来实现在表单未编辑或未保存时离开页面的提示。这个导航守卫会在用户离开当前路由时触发，你可以在其中检查表单是否已经编辑或保存，并根据情况给出提示。

下面是一个示例

我们在组件的选项中定义了 beforeRouteLeave 导航守卫。在该导航守卫中，我们通过检查 formEdited 和 formSaved 来判断表单是否已经编辑或保存。若有未保存数据，则弹出确认提示框供用户选择。如果用户确认离开，则通过调用 next() 完成导航操作；如果用户取消离开，则调用 next(false) 取消导航。