CODEWITHSUNDEEP
javascripttypescriptvue.jsvue-router
dunhilblack
dunhilblack

Reputation: 305

Vue Router push Error: Avoided redundant navigation to current location

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

Upvotes: 4

Views: 11795

Answers (4)

Rafa Ayadi
Rafa Ayadi

Reputation: 347

You should not be catching broad errors. Instead, you should find the root cause of the issue and fix it. In this case, Vue is complaining about you redirecting your app to the same page you are currently on. In my case, the issue was that another function crashed and in that secondary function, I was pushing the route I was currently on. I hope this helps.

Upvotes: 0

Wenfang Du
Wenfang Du

Reputation: 11347

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.

Upvotes: 6

nibnut
nibnut

Reputation: 3127

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

Upvotes: 3

Neha Soni
Neha Soni

Reputation: 4684

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!

Upvotes: 2

Related Questions