在 nuxt 上更改路由后没有销毁页面

Question

我的页面上有一个简单的页面我有一个调用 api 的函数。当我改变页面时这个功能并没有消失，它再次调用api方法

我的函数

async getFlights() {
  try {
    const { data } = await this.$axios.get(
      `/api/v1/flights/${this.flightIndexResponse.index}`,
    );
    this.filterResult = [];
    this.loadingFlights = false;
    this.flightResponse = data?.data?.items;
  } catch (e) {
    if (e?.response?.data?.code === 418 && this.teapotErrorCounter < 10) {
      setTimeout(() => {
        this.getFlights();
      }, 2000);
    } else {
      this.reponseStatus = false;
      this.flightResponse = [];
      this.reponseStatus = false;
      this.loadingFlights = false;
    }
  }
}

当服务器响应状态代码 418 时。这个功能再次运行。当我改变路线时没有破坏功能

Answer 1

setTimeout 函数将回调执行添加到不同的队列中，以便进程稍后执行。因此，即使您更改页面并且组件被销毁，setTimeout 回调仍然存在（所有代码仍然加载，只是 Vue 组件实例消失了）

这里有几种可能的解决方案，但我建议您取消页面更改时的 setTimeout。

vue-router 公开了几个钩子（称为 navigation guards）来监听页面变化：

retryTimeout: null,

[...]

if (e?.response?.data?.code === 418 && this.teapotErrorCounter < 10) {
  this.retryTimeout = setTimeout(() => {
     this.getFlights();
  }, 2000);
}

[...]

beforeRouteLeave() {
  // when leaving the page
  clearTimeout(this.retryTimeout)
}

在 nuxt 上更改路由后没有销毁页面

didnt destroyed the page after change the route on nuxt

lifecycle

vue.js

nuxt.js