Vue Router push Error: Avoided redundant navigation to current location

user_11410229 0
Viewed 8147

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? :/

vue-router vue.js typescript javascript
3 Answers

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

For more details, please refer to Navigation Failures.

user_78818590

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!

user_118348560

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)
        }
    })
};
user_52255030
Related