Is there any workaround for "NavigationDuplicated" exception in Vue.js when pushing query parameters in the url while remaining on the same path

Question

Current url is

/search

New url should be

/search?foo=bar

I just want to update my query params being on the same route as a result of application of some filters on the page

My code:

this.$router.push({query: params})

There is a way to handle the "NavigationDuplicated" error using a catch block but that only supresses the error, the query parameters in the route are still not updated.

Related issue:

How to use router.push for same path, different query parameter in Vue.js

But this gives the path '/' but i need to remain on the same page

Although it doesn't solve your problem, a workaround would be to completely reload the page, or store the values in a state storage like vuex 🤔 — Keimeno
– Keimeno, Commented Jan 18, 2020 at 14:28
neither are feasible, reloading the entire page on a filter is just bad UX and storing the values would not make the url shareable to others.If someone opens the same url it should reapply those filters — Wajih Siddiqui
– Wajih Siddiqui, Commented Jan 18, 2020 at 14:33
It does, you write the query params to a vuex store, and read them from there instead from the queries. If the page is loaded, you check the queries and store them into the vuex storage. — Keimeno
– Keimeno, Commented Jan 18, 2020 at 14:38
@WajihSiddiqui ? You probably has error in your router file. Can you paste it? — Adam Orłowski
– Adam Orłowski, Commented Jan 21, 2020 at 16:23

Daniel · Accepted Answer · 2020-01-18 16:00:16Z

0

You can add catch to workaround this error:

this.$router.push({query:params}).catch(() => {})

answered Jan 18, 2020 at 16:00

Daniel

2,7772 gold badges22 silver badges37 bronze badges

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

1 Comment

Wajih Siddiqui Over a year ago

what will this error handler do exactly, the task i wanted to achieve (pushing param into url) failed, can't add this statement in the catch again

Pau · Accepted Answer · 2022-11-17 20:44:12Z

0

You can use history.pushState(), it will modify the URL without pushing the router.

https://stackoverflow.com/a/71042001/19222560

answered Nov 17, 2022 at 20:44

Pau

215 bronze badges

Collectives™ on Stack Overflow

Is there any workaround for "NavigationDuplicated" exception in Vue.js when pushing query parameters in the url while remaining on the same path

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related