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
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
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
@WajihSiddiqui ? You probably has error in your router file. Can you paste it? — Adam Orlov

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

You can add catch to workaround this error:

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

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

1 Answers