Vue Router push Error: Avoided redundant navigation to current location

Question

Is there a way to avoid Error: Avoided redundant navigation to current location. I need to do a pagination, this is the method:

handlePageChange(page: number): void {
  const query = {
    ...this.$route.query,
    page: page.toString(),
  };
  this.$router.push({ name: 'PageName', query });
}

and I keep getting error in the console:

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/page-path?page=2".

I tried doing a catch with the router but that does not work. Can someone help me shed some light what am i doing wrong here? :/

Actually, you are trying to navigate to the same page where you are currently, that's why you are having the navigation duplicated error. Ex: You are on xyz page and you are again trying to navigate to the same xyz page. — Yash Maheshwari, Jan 25 '21 at 04:33
You can also try this `this.$router.push({ name: 'PageName', query }).catch(err => {})` — Yash Maheshwari, Jan 25 '21 at 04:39
Hi, i tried your solution it seems to work on the first page to second, if i navigate to the third and so on it won't work and cmiw also that it just suppresses the error message. — dunhilblack, Jan 25 '21 at 04:49
You can try adding a condition that if current path/query is not same as the path to route then only change the path otherwise not. `if (this.$route.path !== path) this.$router.push(path)` — Yash Maheshwari, Jan 25 '21 at 04:52

Wenfang Du · Answer 1 · 2023-04-10T08:39:57.677

If it's safe to ignore, and you are using vue-router ^3.4.0, you can do:

import VueRouter from 'vue-router'

const { isNavigationFailure, NavigationFailureType } = VueRouter
...
this.$router.push(fullPath).catch(error => {
  if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
    throw Error(error)
  }
})

Or handle it globally:

import Vue from 'vue'
import VueRouter from 'vue-router'

const { push } = VueRouter.prototype

const { isNavigationFailure, NavigationFailureType } = VueRouter

VueRouter.prototype.push = function (location) {
  return push.call(this, location).catch(error => {
    if (!isNavigationFailure(error, NavigationFailureType.duplicated)) {
      throw Error(error)
    }
  })
}

Vue.use(VueRouter)

For more details, please refer to Navigation Failures.

Neha Soni · Answer 2 · 2021-01-25T09:59:04.060

2

You can globally handle this problem. Open your router's index file (index.js) and use this code inside it-

import VueRouter from "vue-router";
Vue.use(VueRouter);

// Handle navigation duplication for router push (Globally)

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

Try this example - here

Cheers!

edited Jan 25 '21 at 09:59

answered Jan 25 '21 at 06:39

Neha Soni

3,935
2
10
32

You should never silently catch broad errors. – Toilal Jan 28 '22 at 13:20

score 2 · Answer 3 · answered Apr 04 '22 at 13:59

This is a bit dated, but merging both existing answers for a cleaner, global handling:

import VueRouter from "vue-router";
Vue.use(VueRouter);
const { isNavigationFailure, NavigationFailureType } = VueRouter;

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    original_push.call(this, location).catch(error => {
        if(!isNavigationFailure(error, NavigationFailureType.duplicated)) {
            throw Error(error)
        }
    })
};

Vue Router push Error: Avoided redundant navigation to current location

3 Answers3

Linked