防止在路由查询参数更改时重新获取 api

Question

这是我的页面脚本：

created() {
    this.fetchCategories();
  },
  methods: {
    ...mapActions(['fetchCategories']),
  },

如您所见，页面加载时会自动获取 API。

这里我根据路由查询更改打开模态：

 watch: {
    // open dialog on route query
    loading({ status, type }) {
      if (type === 'index' && !status) {
        const formQuery = this.$route.query.form;

        if (formQuery) {
          if (formQuery === 'create') {
            [this.dialog, this.formType] = [true, 0];
          } else if (formQuery === 'edit' && this.$route.query.id) {
            [this.dialog, this.formType] = [true, 1];
          } else if (formQuery === 'delete' && this.$route.query.id) {
            this.dialogDelete = true;
          }
        }
      }
    },
  },

通过这些方法，我使用查询参数推送路由器：

    openFormDialog(id = null) {
      this.dialog = true;

      if (id) {
        this.formType = 1;
        this.$router.push({ name: 'CategoryIndex', query: { form: 'edit', id } });
      } else {
        this.formType = 0;
        this.$router.push({ name: 'CategoryIndex', query: { form: 'create' } });
      }
    },
    openDeleteDialog(id) {
      this.$router.push({ name: 'CategoryIndex', query: { form: 'delete', id } });
      this.dialogDelete = true;
    },
  },

此方法关闭模态并推送路由器（删除查询参数）：

 close() {
      this.$emit('input', false);
      this.$router.push({ name: 'CategoryIndex' });
    },

问题是当我删除（或重定向回“CategoryIndex”页面）时，页面组件将重新呈现并再次获取 API。我该如何解决？有什么解决办法？