javascript - Vue Router push Error: Avoided redundant navigation to current location - Stack Overflow

admin管理员组

文章数量:1244329

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

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

• javascript
• typescript
• vue.js
• vue-router

Share Improve this question Follow edited Jan 25, 2021 at 9:37 Wenfang Du 11.4k1313 gold badges7575 silver badges113113 bronze badges asked Jan 25, 2021 at 4:30 dunhilblackdunhilblack 30511 gold badge55 silver badges1414 bronze badges 4

• 1 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 Commented Jan 25, 2021 at 4:33
• You can also try this this.$router.push({ name: 'PageName', query }).catch(err => {}) – Yash Maheshwari Commented Jan 25, 2021 at 4: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 Commented Jan 25, 2021 at 4: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 Commented Jan 25, 2021 at 4:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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.

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

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!

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 plaining 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.

本文标签： javascriptVue Router push Error Avoided redundant navigation to current locationStack Overflow