I don't want to rerender the page when changing the dynamic params on Nuxt

user_17658482 0
Viewed 173

I have a simple page with two dynamic params when I'm on the page and changing the URL params fetch method will run again. I don't want this behavior.

fetch method:

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

getResult Method:

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

I have this code when changing the URL params run fetch method and getResult method together and it causes this happen.

nuxt.js vue.js url-parameters javascript
1 Answers

You can change the query parameters without changing the path parameter and so, not re-rendering the page:

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

You can then watch the queries with for example :

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