Getting navigation duplicated error while the route is being replaced on Vue-Router

While joyBinary's answer solves the problem, it also swallows all other errors which might not be the desired behaviour.

This approach solves this issue:

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  });
}

Use this code in router.js file:

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
}

This code can override catch's exceptions.


For those using Typescript, here's Errik Sven Puudist's answer converted:

const originalPush = Router.prototype.push;
Router.prototype.push = async function (location: RawLocation) {
  let route: Route;
  try {
    route = await originalPush.call<Router, [RawLocation], Promise<Route>>(this, location);
  } catch (err) {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  }

  return route!;
}

Tags:

Vue.Js