[Vuejs]-Replacing the query causing NavigationDuplicated error in Vue-router

by

0👍

You should update your new route like this

function removeFromQuery(route, queryName, queryValue)
{
  const query = Object.assign({}, route.query);
  if (queryName in query)
  {
    const idx = query[queryName].indexOf(queryValue);
    if (idx !== -1) 
    {
      query[queryName].splice(idx, 1);
      this.$router.replace({
        ...this.$router.currentRoute,
        query
      });
    }
  }
}

0👍

The updatedQuery query is not the deep clone of RoutingHelper.router.currentRoute.query. Below code is not enough to create the deep copy of query:

const updatedQuery: QueryParameters = {
   ...RoutingHelper.router.currentRoute.query as object
};

So, when execute

RoutingHelper.router.push({
  query: updatedQuery
})

we don’t subtitute query to new value. That why error occurs.

Use lodash or other libraries provides deep cloning, or use own implementation of deep cloning.

Leave a comment