Javascript 防止路由查询参数更改时重新蚀刻api

这是我的页面脚本：

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

正如您看到的，当页面加载时，它会自动获取API

在这里，我根据路由查询更改打开modals：

 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;
    },
  },

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

---

问题是，当我删除（或重定向回“CategoryIndex”页面）页面组件时，页面组件将被重新命名，并再次获取API。我怎样才能解决这个问题？解决方案是什么？

您可以定义一个getter并检查存储区中的fetchCategories，如果它有一些数据，不要调用API，否则调用API作为usual@NishantPatel当我创建一个新类别时，我应该再次获取api！然后从this.$route.params中读取它是什么类型的查询。如果它的

query.form==='delete'

，您可以添加一个条件

created（）{If（query.form！=='delete'）{this.fetchCategories（）；}}，

@NishantPatel在第一次加载时应该获取api，如果是delete或create或。。。碰巧它应该重新获取它为什么不移动

this.fetchCategories（）从已创建（）到您的观察者
 close() {
      this.$emit('input', false);
      this.$router.push({ name: 'CategoryIndex' });
    },