How to fix ‘Avoided redundant navigation to current location’ error in Vue.js

In this tutorial, you will learn how to deal with the ‘Avoided redundant navigation to current location’ router error.

If you notice the following error in developers console, it means that you’re trying to access the same route.

Uncaught (in promise) Error: Avoided redundant navigation to current location: "/admin/projects/100".

How to solve

Solution 1

You can solve it by using the catch clause:

this.$router.push({name: 'AdminProjects', params: { id: item.id }}).catch(() => {})

It’s not an ideal solution because it just hides all the router errors.

Solution 2

A better way will be to just hide this error but show all the other errors.

this.$router.push({name: 'AdminProjects', params: { id: item.id }}).catch(error => {
  if (
    error.name !== 'NavigationDuplicated' &&
    !error.message.includes('Avoided redundant navigation to current location')
  ) {
    console.log(error)
  }
})

This way you will still be able to see all the other important errors in your router.

If you find this post useful, please let me know in the comments below.

Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-scroll

PS: You can also check how to get the first item in Vue.js array, how to add a class to body tag in Vue.js, How to hide uncompiled mustache {{ code }} in Vue.js, How to use Vue.js filters inside the Vue instance and other Vue.js tutorials.