Vuejs:在路线更改之前显示确认对话框

新手上路,请多包涵

在我的 vueJS 项目中,我想在当前路由更改之前显示确认对话框。 在此处输入图像描述

是的,它应该重定向到下一个所需的路线,否则保持在同一条路线上。

知道如何实现吗?

提前致谢。

原文由 Sagar Kharche 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 582
2 个回答

您可以使用 组件 beforeRouteLeave 。请参阅 https://router.vuejs.org/en/advanced/navigation-guards.html

演示: https ://codesandbox.io/s/jzr5nojn39(尝试在主页、第 1 页、第 2 页之间导航)

示例代码(使用 vuejs-dialog 作为确认对话框):

     beforeRouteLeave (to, from, next) {
        this.$dialog.confirm('Do you want to proceed?')
        .then(function () {
            next();
        })
        .catch(function () {
            next(false);
        });
    }

如果应该继续,请使用 next()

如果要取消重定向,请使用 next(false)

原文由 Jacob Goh 发布,翻译遵循 CC BY-SA 3.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);
    }
  }

在 codesandbox 中查看实际效果

要点 这里的关键要点是 beforeRouteLeave 导航守卫,如果数据中的 to 属性为空,我们不允许用户离开。唯一不能为 null 的情况是当用户单击对话框中的保存或丢弃按钮时。

原文由 Roland 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题