How to set query parameters without reloading component in Vue with Vue-Router

Question

I am trying to set the Query Parameters without reloading component in Vue with Vue-Router. But using below code it reloads the component:

this.$router.replace({query: this.filters});

How we can stop reload the component while changing the Query Parameters?

Can you add more context to your question, like how is your router structured. How does you router view look like, how does the component you are calling it from look like, some snippets related to these. Your issue can be caused by a number of factors, like keying on components or router-view itself etc, until then I do not think that anyone can solve your exact problem :D — Komi, Dec 13 '21 at 15:29

score 3 · Answer 1 · answered Feb 06 '22 at 18:00

3

this.$router.replace({ ...this.$router.currentRoute, query: this.filters });

Going to the current path will not render the currently component again

answered Feb 06 '22 at 18:00

Pedrocate

Adding `...this.$router.currentRoute.query` really works – HauPham Mar 21 '22 at 15:23

score -1 · Answer 2 · answered Apr 20 '21 at 08:41

-1

According to @ManUtopiK you can use javascript's history API to accomplish this, check his answer here.

answered Apr 20 '21 at 08:41

2 Answers2