在 Vue 中,可以使用 beforeRouteLeave
导航守卫来实现在表单未编辑或未保存时离开页面的提示。这个导航守卫会在用户离开当前路由时触发,你可以在其中检查表单是否已经编辑或保存,并根据情况给出提示。
下面是一个示例
我们在组件的选项中定义了 beforeRouteLeave
导航守卫。在该导航守卫中,我们通过检查 formEdited
和 formSaved
来判断表单是否已经编辑或保存。若有未保存数据,则弹出确认提示框供用户选择。如果用户确认离开,则通过调用 next()
完成导航操作;如果用户取消离开,则调用 next(false)
取消导航。