在我导航到另一个产品页面之前没有显示对话框

Question

在产品编辑页面中，我在手表中有以下内容：

watch: {
   $route: 'fetchProductDetais',
  },

因此，当您从下拉列表中选择另一个产品时，它会通过 id 打开另一个产品编辑器并使用相同的组件。它工作正常。路线如下所示：

/products/edit/productId

问题是我想用上面的代码显示一个对话框。因此，当数据更改并单击另一个项目时，它应该显示对话框以通知保存更改。我尝试使用 beforeRoutUpdate 但它不起作用。它总是在不显示对话框的情况下更改 ID。这也是该部分的代码：

hasUnsavedChanges() {
      if (this.dataCahnged.length > 0) {
        return dialog.confirm({
          message: `
            You have unsaved changes, don't forget to save them.
          `,
          confirmText: 'Save',
          cancelText: 'Cancel',
          onConfirm: () => this.update(),
          onCancel: () => this.cancel(),
        })
      }
    },

我认为必须使用这个：

 beforeRouteUpdate (to, from , next) {
    next()
},

问题是我如何才能正确实现它，以便根据条件在更新路线中的产品 ID 之前检查并显示对话框，并且不会损害我在手表中设置的 $route

整个组件如下所示：

  watch: {
       $route: 'fetchProductDetais',
      },

methods: {

fetchProductDetais(){
...
}

 hasUnsavedChanges() {
          if (this.dataCahnged.length > 0) {
            return dialog.confirm({
              message: `
                You have unsaved changes, don't forget to save them.
              `,
              confirmText: 'Save',
              cancelText: 'Cancel',
              onConfirm: () => this.update(),
              onCancel: () => this.cancel(),
            })
          }
        },

  update(){...}

  cancel(){...}
}

因此，如何正确添加 beforeRoutUpdate 将与 hasunSavedChanges 一起使用并且不会崩溃 detchProductDetails 附加在手表内，它工作正常，每次当您从下拉列表中单击另一个产品时，它都会导航到新的：productId 页面并完美地获取该新产品的详细信息。

Answer 1

beforeRouteLeave 钩子可能在这里工作。不需要watches：

export default {
  data: () => ({
    confirmed: false
  }),

  computed: {
    hasUnsavedChanges() {
      if (this.dataCahnged.length > 0) {
        return dialog.confirm({
          message: `
            You have unsaved changes, don't forget to save them.
          `,
          confirmText: 'Save',
          cancelText: 'Cancel',

          onConfirm: () => {
            this.update();
            this.confirmed = true;
          },
          
          onCancel: () => {
            this.cancel();
            this.confirmed = false;
          },
        })
      }
    }
  },

  beforeRouteLeave(to, from, next) {
    // Returning false here will simply abort the current navigation
    next(this.confirmed);
  }
}