在Nuxt上更改动态参数时，我不想重新渲染页面

Question

我有一个简单的页面，有两个动态参数，当我在页面上，改变URL参数获取方法将再次运行。我不希望这种行为。

获取方法:

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