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

in General Write a comment

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 arrayhow to add a class to body tag in Vue.jsHow to hide uncompiled mustache {{ code }} in Vue.jsHow to use Vue.js filters inside the Vue instance and other Vue.js tutorials.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment