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