我不想在更改nuxt上的动态参数时恢复页面

Question

当我在页面上时，我有一个带有两个动态参数的简单页面，更改URL参数fetch方法将再次运行。我不想要这种行为。

Fetch方法：

async fetch() {
    await this.getFlightResult();
}

GetResult方法：

async getResult() {

    this.$router.push({
        path: `/air/${originCity?.id}-${destinationCity?.id}/${originCity?.name}-${destinationCity?.name}`,
    });
    await this.getFlightResult();
}

GetResultMethod：

async getFlightResult(){
   const { data } = await this.$axios.get(`/api/v1/flights')
}

在更改URL参数运行Fetch方法和GetResult方法时，我有此代码，这会导致这种情况。

Answer 1

您可以在不更改路径参数的情况下更改查询参数，因此，不重新呈现页面：

this.$router.push({query: { myFirstQuery: 'foo', mySecondQuery: 'bar'}})

然后，您可以使用以下方式观看查询：

watch: {
    '$route.query': {
      immediate: true,
      handler(newVal){
        // updating your values here
      }
    }
  }