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
– Komi, Commented Dec 13, 2021 at 15:29

Pedrocate · Accepted Answer · 2022-02-06 18:00:43Z

5

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

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

answered Feb 6, 2022 at 18:00

Pedrocate

1542 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adding ...this.$router.currentRoute.query really works

João Pedro Domingues · Accepted Answer · 2021-04-20 08:41:27Z

0

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

answered Apr 20, 2021 at 8:41

1169 bronze badges

MD Golam Rakib · Accepted Answer · 2023-12-08 13:09:24Z

0

The following solution works for me in vue2. You can try it...

this.$router.push({name: this.$route.name, query: this.filters});

answered Dec 8, 2023 at 13:09

MD Golam Rakib

1644 bronze badges