vue.js change query location NavigationDuplicated

The error will be thrown only if your params the same, so you could just check your params before push or replace. Also, you could use async/await or then/catch with there methods, here is an example:

try {
  if (/* id or p have been changed in this.$route.query */) {
    await this.$router.push({query:{id:'2',p:'4'}});
  }

} catch (err) {
...
}

I had the same issue of getting a "NavigationDuplicated" error on adjusting my query. In my case the problem was because on page load I was naively getting the query object directly from the router. I loaded it like:

beforeRouteEnter (to, from, next) {
  store.dispatch('setQuery', to.query);
  next();
}

where setQuery would set my vuex store variable query. The issue is then that this object just points to the query inside the route object, and making changes to it changes directly route.query but the url doesn't react to this change. If you then do something like:

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

you will get a "NavigationDuplicated" error as the new "query" will be identical to the old "query" since you are just passing the pointer to the original object.

To avoid this issue you can do some sort of deep copy (e.g. JSON.parse(JSON.stringify(to.query))) to make sure you are not directly modifying the route.query when you adjust the query.

if you create button and want to router push, just convert those button to <router-link :to="routeObject" />. Router-link will not react if destination route = current route, so it won't show error navigationDuplicate

note:

routeObject : {
  path : '/search',
  query : {}
}