在我的 vueJS 项目中,我想在当前路由更改之前显示确认对话框。
是的,它应该重定向到下一个所需的路线,否则保持在同一条路线上。
知道如何实现吗?
提前致谢。
原文由 Sagar Kharche 发布,翻译遵循 CC BY-SA 4.0 许可协议
在我的 vueJS 项目中,我想在当前路由更改之前显示确认对话框。
是的,它应该重定向到下一个所需的路线,否则保持在同一条路线上。
知道如何实现吗?
提前致谢。
原文由 Sagar Kharche 发布,翻译遵循 CC BY-SA 4.0 许可协议
接受的答案显示了如何使用 vuejs-dialog 来做到这一点。但是,如果您不想使用此库,请检查以下内容:
假设您有一个包含 3 个选项的对话框:
关闭对话框 => 调用 closeDialog()
并停留在同一页面
保存更改 => 调用 saveChanges()
保存更改并离开
丢弃更改 => 调用 discardChanges()
导航离开而不保存更改
data: () => ({
to: null,
showDialog: false
}),
beforeRouteLeave(to, from, next) {
if (this.to) {
next();
} else {
this.to = to;
this.showDialog = true;
}
},
methods: {
closeDialog() {
this.showDialog = false;
this.to = null;
},
saveChanges() {
// add code to save changes here
this.showDialog = false;
this.$router.push(this.to);
},
discardChanges() {
this.showDialog = false;
this.$router.push(this.to);
}
}
要点 这里的关键要点是 beforeRouteLeave 导航守卫,如果数据中的 to
属性为空,我们不允许用户离开。唯一不能为 null 的情况是当用户单击对话框中的保存或丢弃按钮时。
原文由 Roland 发布,翻译遵循 CC BY-SA 4.0 许可协议
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
您可以使用 组件
beforeRouteLeave
。请参阅 https://router.vuejs.org/en/advanced/navigation-guards.html 。演示: https ://codesandbox.io/s/jzr5nojn39(尝试在主页、第 1 页、第 2 页之间导航)
示例代码(使用 vuejs-dialog 作为确认对话框):
如果应该继续,请使用
next()
。如果要取消重定向,请使用
next(false)
。