In my opinion, the most effective solution for this issue is to address it at the root level without relying on Router.push as an 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);

For those who may not be fully confident in capturing various errors, here is a more thoughtful approach to the implementation:

this.$router.push("route").catch(err => {
  if (err.type != "DuplicateNavigation") {
    throw err;
  }
});

Looking ahead to 2021, the worldwide setup :

I made a specific adjustment to address the persistent NavigationDuplicated error, as leaving a catch empty can lead to potential risks. Here's what I did :

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)
    })
}

Add this snippet during vue-router initialization.
Credit goes to @Oleg Abrazhaev for the suggestion.

While looking for a solution, I encountered the same issue and found a workaround by including timestamp in the this.$route.query parameters on the search page.

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

I hope this suggestion proves to be helpful for you as well.

When implementing router.push in your code and disregarding the possibility of navigation failure, it is recommended to handle potential errors using catch:

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

When referring to the manual:

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

An easier alternative can be:

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

It seems like you are mixing various concepts here, from using router-links to programmatic navigation, query params, and a state store. This can make it tricky to determine the best solution for your situation.

However, I believe the most suitable approach for you would be to:
1) Define your route as

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

2) Opt for a responsive <router-link> instead of using 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 by using props: ['searchString'] and referencing it with this.searchString

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

For a complete example, check out: https://codesandbox.io/s/vue-routing-example-9zc6g
Please note that I simply forked the first codesandbox I found with a router, so adjust accordingly.

To implement this in TypeScript, follow these steps:

const customPush = VueRouter.prototype.push

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

Although I may be fashionably late to the occasion, I wanted to share my unique solution to this problem that hasn't been mentioned yet: I decided to create a middleman search page that acts as a gateway to the search results. This page now serves as a hub for preprocessing the search terms before displaying the final results.

The design of the page is quite simple:

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

By implementing this approach, I successfully eliminated the NavigationDuplicated error. Additionally, by handling the fetch operation on this intermediate page, I have effectively isolated error-handling responsibilities from both the search bar and the results display, providing an added layer of organization and efficiency.

Sharing the solution I discovered here because I struggled to find clear documentation on it and had to figure it out through trial and error. My interpretation of vue-router guards may be corrected by someone or prove useful to others.

This solution utilizes vue-router V4.x and a global beforeEach guard.

The scenarios covered are:

1. User accesses https://app.com/ without authorization;
2. User accesses https://app.com/ with prior authorization;
3. User accesses any route, regardless of authentication requirements.

Routes:

const routes = [
  /**
   * Routes not requiring authentication
   */
  {
    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 authentication
   */
  {
    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') }
    ]
  }
];

Global beforeEach 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 inquiry seems to be from a while ago.

The issue lies with the use of "@click.prevent". This command is not functioning correctly because your button is set as a submit button, causing the event to trigger twice.

Consider using "@submit.prevent" instead (or adjust the type of your button) for it to work properly.

It is recommended to follow this approach:

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

To learn more, check out the Vue Router documentation

By incorporating a combination of extending the prototype with a check for the Navigation Duplicated Error, I have managed to address various errors and warnings effectively. Following a week in production, there have been no occurrences of the NavigationDuplicated error and the system is functioning smoothly.

import { equals } from 'ramda'

export function integrate(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)
}

Upon investigation, I discovered that an error occurs when attempting to substitute a URL query parameter with the same value.

In my scenario, I have select filters where the URL query string parameters are synchronized with their corresponding values. Everything functions smoothly when switching to a new value. However, if the value remains unchanged (such as navigating back from history) and the query string parameter is replaced with the same value, an error is triggered.

The solution I found was to implement a check to determine if the value has changed before replacing the query parameter in the router:

let newValue = 'foo'; // specify the new query value for the parameter
let qcopy = { ...this.$route.query }; // create a copy of the current query
// To prevent NavigationDuplicated error: Avoid redundant navigation to the current location
if (qcopy['your_param'] != newValue){
  qcopy['your_param'] = newValue;
  this.$router.replace({query: qcopy});
}

Preventing Click Propagation to Router Actions

I have a unique perspective on how to handle click propagation in relation to router actions. While my answer may not directly address the original question, it offers valuable insight that can be beneficial to others.

In my opinion, it is best to avoid making changes to global configurations or trying to intercept router logic. Instead of cluttering your application with exceptions, consider a more streamlined approach.

For instance, imagine a scenario where you have filters within a results view presented as router links. You may want these filters to behave like links without triggering actual router actions when clicked.

The solution is to intercept the click event before it reaches the router action!

This way, you can achieve the desired outcome:

Search filters (presented as links) that...

1. Perform specific logic within a view
2. Retain the benefits of being displayed as links (e.g., improved bot scans, user convenience, accessibility)

Technique:

Utilize @click.prevent on a child element within the router-link to prevent the click event from reaching the router.

Example:

Before: Router actions are triggered unnecessarily even within the current route

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

After: Router actions are prevented, and alternative logic (applyFilter) is executed

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

By adopting this method, you can avoid unnecessary complexity and high-level exceptions in your application.

In the initialization of router/index.js, I found this solution to be effective. By utilizing the call() method, you have the ability to handle various exception types or customize messages to either bypass specific conditions or trigger particular ones.

Make sure to check out

//HANDLE ROUTE ERRORS HERE

for detailed insights.

import Vue from "vue";
import VueRouter from "vue-router";

import routes from "./routes";

Vue.use(VueRouter);

/*
 * If SSR mode is not in use, the Router instantiation can
 * be exported directly;
 *
 * The function below can also be async; utilize
 * async/await or return a Promise that resolves
 * with the Router instance.
 */

export default function(/* { store, ssrContext } */) {
  const router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    // Ensure these are retained as they are and update in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: "history"
  });

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
      var token = window.localStorage.getItem("token");
      if (token != null) {
        var decodedtoken = JSON.parse(atob(token.split(".")[1]));
        var role =
          decodedtoken[
            "http://schemas.microsoft.com/ws/2008/06/identity/claims/role"
          ];
        if (role != "Admin") {
          next("/accessdenied");
        } else {
          next();
        }
      } else {
        next("/login");
      }
    } else {
      next();
    }

    if (to.meta.requiresLogin) {
      var token = window.localStorage.getItem("token");
      if (token != null) {
        next();
      } else {
        next("/login");
      }
    }
  });


 //Handle route errors in this section
  const originalPush = router.push;
  router.push = function push(location) {
    return originalPush.call(this, location).catch(err => {
      console.warn("router>index.js>push()", err);
    });
  };

  return router;
}

Borrowed inspiration from @Abhishek Shastri's response