在新页面却加载旧页面的接口

问题:

使用甘特图gantt时,做了一个功能,双击甘特图数据能进行搜索详细情况

      // 3.7 双击显示明细
      gantt.config.details_on_dblclick = true;
//监视
      if (this.eventId) {
        gantt.detachEvent(this.eventId); // 先移除之前的事件绑定
      }
      this.eventId = gantt.attachEvent("onTaskDblClick", (id, e) => {
        this.loading = true;
        if (gantt.isTaskExists(id)) {
          let task = gantt.getTask(id);
          if (task) {
            if (task.xvhao !== undefined) {
              this.searchXvHao = task.xvhao;
              this.showTaskDetails(task.xvhao);
            } else {
              console.error('xvhao property is missing in task:', task);
            }
          } else {
            console.error('Task object is undefined for id:', id);
          }
        } else {
          console.error('Invalid task id:', id);
        }
      });

但是遇到了,打开新页面的甘特图双击之后加载的是上一个页面的接口方法。

解决：

所以加上离开页面时进行销毁点击事件，加上离开页面时的销毁

  beforeDestroy() {
    // 在组件销毁前进行清理工作
    bus.$off('Cancel_schedule');
    bus.$off('callSchedule');
    if (this.eventId) {
      gantt.detachEvent(this.eventId);
    }
  },

 

 

2、同时点击甘特图数据总会报错，“找不到id”，所以在进入时也加上删除事件，可以防止双击引起了两次点击事件。

      //监视
      if (this.eventId) {
        gantt.detachEvent(this.eventId); // 先移除之前的事件绑定
      }
      this.eventId = gantt.attachEvent("onTaskDblClick", (id, e) => {
        this.loading = true;
        if (gantt.isTaskExists(id)) {
          let task = gantt.getTask(id);
          if (task) {
            if (task.xvhao !== undefined) {
              this.searchXvHao = task.xvhao;
              this.showTaskDetails(task.xvhao);
            } else {
              console.error('xvhao property is missing in task:', task);
            }
          } else {
            console.error('Task object is undefined for id:', id);
          }
        } else {
          console.error('Invalid task id:', id);
        }
      });

效果：