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

Abandoned by fate

已于 2023-09-28 11:51:57 修改

阅读量583

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-09-28 11:45:29 首次发布

本文链接：https://blog.csdn.net/weixin_55824848/article/details/133379622

版权

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

下面是一个示例

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