NavigationDuplicated Navigating to current location ("/search") is not allowed

This happened to me when I had a router-link pointing to the same route. e.g. /products/1.

The user is able to click on the products, but if a product was already clicked (and the component view was already loaded) and the user attempts to click it again, the error/warning shows in the console.

You can learn more on the github issue..

Posva, one of the main contributors of vue-router suggests:

router.push('your-path').catch(err => {})

However, if you don't want to have a catch block which does nothing, in order to solve the issue you can compare the router navigation with the current route and only navigate if they differ:

const path = `/products/${id}`
if (this.$route.path !== path) this.$router.push(path)

Note: $route is an object provided by vue-router to every component. See The Route Object for more info.

---

I think the best solution to this problem can be implemented at the root level if we are not going to further use Router.push as asynchronous call.

import Router from 'vue-router';

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

Vue.use(Router);

---

If you are not feeling comfortable catching all kind of errors, I think this implementation is more considerate:

this.$router.push("path").catch(error => {
  if (error.name != "NavigationDuplicated") {
    throw error;
  }
});

---

As of 2021, global configuration :

I only wanted to silence NavigationDuplicated error, an empty catch can be dangerous. So I did this :

const router = new VueRouter({/* ... */})

const originalPush = router.push
router.push = function push(location, onResolve, onReject)
{
    if (onResolve || onReject) {
        return originalPush.call(this, location, onResolve, onReject)
    }
 
    return originalPush.call(this, location).catch((err) => {
        if (VueRouter.isNavigationFailure(err)) {
            return err
        }
   
        return Promise.reject(err)
    })
}

Insert this once when you initialize vue-router. Thanks to @Oleg Abrazhaev for the update.

---

I encountered the same problem while searching. My solution is to add timestamp to the this.$route.query parameters of the search page.

this.$router.push({
    path: "/search",
    query: {
      q: this.searchQuery,
      t: new Date().getTime(),
    }
  });

Hope it helps you.

---

if you are using router.push in your code and you don't care about the navigation failing, you should catch it by using catch:

router.push('/location').catch(err => {})

---

in manual:

router.push(location, onComplete?, onAbort?)

You can use more simply

router.push("/", () => {});

---

You mixed multiple concepts here from router-links to programmatic navigation, to query params to a state store. That makes it a bit difficult to help you and tell you what the "correct" solution here is.

Nonetheless, I think the best approach for you would be to: 1) define your route as

{
  path: "/search/:searchString",
  component: MySearchComponent,
  props: true
}

2) use a responsive <router-link> instead of your router.push

<input type="text" v-model="searchString">
<router-link :to="'/search/'+searchString" tag="button">search</router-link>

3) access the searchString in your search component via props: ['searchString'] and this.searchString

props: ['searchString'],
...
computed: {
  msg() {
    return `Searching for, ${this.searchString}!`;
  }
}

Full example: https://codesandbox.io/s/vue-routing-example-9zc6g
Note, I just forked the first codesandbox with a router I could find, adjust accordingly.

---

For TypeScript it worked like this

const superPush = VueRouter.prototype.push

VueRouter.prototype.push = async function push(loc:RawLocation):Promise<Route> {
  try {
    return await superPush.bind(this)(loc)
  } catch (e) {
    if (e?.name === 'NavigationDuplicated') {
      console.warn(e)
      return e
    } else {
      throw e
    }
  }
}

---

I'm very late to the party, but I thought I'd add my solution to this issue as it isn't listed: I simply placed an intermediate searching page as a pass-through to the search results view. I am now using this page for doing some preprocessing of the search terms.

The page template simply is:

<template>
  <div>searching ...</div>
</template>  

The NavigationDuplicated error is now gone and as an added benefit because I perform the fetch in this intermediate page, the responsibility for error-handling is isolated from both the search bar and the results view.

---

I post here the solution I found, because I was not able to find it well documented somewhere, and I went through it by trial and error. It could be useful to someone, or someone may fix my misunderstood interpretation of vue-router guards.

It make use of vue-router V4.x and a global beforeEach guard.

The use cases are:

user asks for https://app.com/ without being already authorized; user asks for https://app.com/ being already authorized; user asks for any available routing, which requires auth or not.

Routes:

const routes = [
  /**
   * Routes not requiring auth
   */
  {
    path: '/',
    component: () => import('layouts/NotAuthorizedLayout.vue'),
    children: [
      {
        path: 'login',
        name: 'LOGIN',
        component: () => import('pages/Login.vue') 
      },
      {
        path: 'emailsignup',
        component: () => import('pages/EmailSignup.vue') 
      },
      {
        path: 'forgottenpassword',
        component: () => import('pages/ForgottenPassword.vue') 
      }
    ]
  },

  /**
   * Routes requiring auth
   */
  {
    path: '/',
    component: () => import('layouts/AuthorizedLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      { 
        path: 'authors',
        name: 'AUTHORS',
        component: () => import('pages/Authors.vue') 
      },
      { path: 'profile', component: () => import('pages/userProfile/index.vue') }
    ]
  }
];

beforeEach global guard:

  const redirectToLogin = route => {
    const LOGIN = 'LOGIN';
    if (route.name != LOGIN) {
      return { name: LOGIN, replace: true, query: { redirectFrom: route.fullPath } };
    }
  };

  const redirectToHome = route => {
    const DEFAULT = 'AUTHORS';
    return { name: DEFAULT, replace: true };
  };

  Router.beforeEach((to, from) => {
    const userIsAuthenticated = store.getters['authentication/userIsAuthenticated'];
    const requiresAuth = to.matched.some((route) => route.meta && route.meta.requiresAuth);

    if (!userIsAuthenticated && to.fullPath === '/') {
      return redirectToLogin(to);
    }

    if (!userIsAuthenticated && requiresAuth) {
      return redirectToLogin(to);
    }

    if (to.fullPath === '/') {
      return redirectToHome(to);
    }

    return true;
  });

---

Your question is rather old.

Your error is the "@click.prevent". This statement does not work, because your button is a submit button (so your event is called twice).

Use "@submit.prevent" should work (or change the type of your button).

---

My solution is a mix of extending prototype with check Navigation Duplicated Error. Other errors and warning should be visible. After a week on production - no NavigationDuplicated and everything is working.

import { equals } from 'ramda'

export function register(Vue) {
  const routerPush = Router.prototype.push
  const routerReplace = Router.prototype.push

  const isNavigationDuplicated = (currentRoute, nextRoute) => {
    const { name: nextName, params: nextParams = {}, query: nextQuery = {} } = nextRoute
    const { name, params, query } = currentRoute

    return equals(nextQuery, query) && equals(nextParams, params) && equals(nextName, name)
  }

  Router.prototype.push = function push(location) {
    if (!isNavigationDuplicated(this.currentRoute, location)) {
      return routerPush.call(this, location)
    }
  }

  Router.prototype.replace = function replace(location) {
    if (!isNavigationDuplicated(this.currentRoute, location)) {
      return routerReplace.call(this, location)
    }
  }

  Vue.use(Router)
}

---

I noticed that error comes up when I tried to replace url query parameter with same value.

I have select filters and url query string params are in sync with their values. It works well as long as you change to a new value. If value remains the same (for example coming back from history) and thus replacing query string parameter with same value, error pops out.

Solution was to check if value is changed, and then replace query param in router:

let newValue = 'foo'; // new query value for parameter
let qcopy = { ...this.$route.query }; // clone current query
// prevent NavigationDuplicated: Avoided redundant navigation to current location
if (qcopy['your_param'] != newValue){
  qcopy['your_param'] = newValue;
  this.$router.replace({query: qcopy});
}

---

Stop the click propagation from hitting the router action

I have a high-level answer here that may be useful to others. It may not directly answer the OP, but this thinking applies.

My take on this is to NOT fiddle around with global configuration or attempt to catch router logic. It doesn't make sense to pollute your app with exceptions all over the place.

In the case of a results view with filters. If the filters happen to be presented as router links (for various reasons), but we don't want actual router logic to occur when they're clicked.

So, capture the click before it gets to the router action!

Then you get the best of both worlds:

Search filters (as a link) that...

Do logic within a view Still provide the benefit of being presented as a link (benefits to bot scans, user convenience and accessibility, etc)

Technique:

Use @click.prevent on a child inside the router-link, to capture and stop the click from hitting the router.

Example:

Before: Router logic occurs, even though we're in the route already

<router-link class="nav-link" :to="{name: 'MovieSection'}" >
    <i class="fas fa-film"></i>Peliculas
</router-link>

After: Router logic inhibited, we run other logic (applyFilter)

<router-link class="nav-link" :to="{name: 'MovieSection'}" >
    <div @click.prevent="myFunc(something)">
        <i class="fas fa-film"></i>Peliculas
    </div>
</router-link>

With this approach you may avoid messy high-level exceptions in your app.

---

Best practice would be:

import { isNavigationFailure, NavigationFailureType } from 'vue-router/src/util/errors';    
this.$router.push(...).catch((error) => {
      if (!isNavigationFailure(error, NavigationFailureType.duplicated))
        throw error
    );
  }

See the Vue Router docs

---

Here's is a simple and efficient solution:

if(from.fullPath === to.fullPath){
    return
}

---