3

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.

jasie
  • 2,192
  • 10
  • 39
  • 54
Amir Mohammad Beheshti
  • 174
  • 7
  • Hi, please show us some code. – kissu Apr 20 '22 at 07:47
  • 1
    Does this answer your question? [How do I change the URL of the page in Nuxt SSR mode without reloading the whole page?](https://stackoverflow.com/questions/58465065/how-do-i-change-the-url-of-the-page-in-nuxt-ssr-mode-without-reloading-the-whole) – STh Apr 20 '22 at 07:54

1 Answers1

0

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
      }
    }
  }
RenaudC5
  • 3,553
  • 1
  • 11
  • 29