How do i change the query Parameters without reloading component in Vue with Vue-Router. But pushing new query always reload the component making my api request to rerun
this.router.replace({query: {name: 'John'} })
Add a comment
|
1 Answer
This one works well in Nuxt, so I guess it's totally fine in Vue (even 3) too.
<button @click="$router.replace({ path: $route.path, query: { plan: 'private' } })">test</button>
It will push the same path you're currently on, but will change the query param in it.
Taken from the official docs: https://router.vuejs.org/guide/essentials/navigation.html
2 Comments
wondra
Can you be more specific what you changed? I have tried explicitly assigning current path (the part
path: $route.path) but it still reloads the component.
InvisibleGorilla
Fyi, if you configured the router scrollBehavior to always scroll all the way to the top of the page as is often wanted (
return { top: 0 };), then check before if it's the same path and return savedPosition so that a query update does not make your page scroll all the way to the top.