Navigationduplicated Navigating to Current Location ("/Search") Is Not Allowed

NavigationDuplicated Navigating to current location ("/search") is not allowed

This happened to me when I had a router-link pointing to the same route. e.g. /products/1.

The user is able to click on the products, but if a product was already clicked (and the component view was already loaded) and the user attempts to click it again, the error/warning shows in the console.

You can learn more on the github issue..

Posva, one of the main contributors of vue-router suggests:

router.push('your-path').catch(err => {})

However, if you don't want to have a catch block which does nothing, in order to solve the issue you can compare the router navigation with the current route and only navigate if they differ:

const path = `/products/${id}`
if (this.$route.path !== path) this.$router.push(path)

Note: $route is an object provided by vue-router to every component. See The Route Object for more info.

How to solve Avoided redundant navigation to current location error in vue?

As I remember well, you can use catch clause after this.$router.push. Then it will look like:

this.$router.push("/admin").catch(()=>{});

This allows you to only avoid the error displaying, because browser thinks the exception was handled.

Vue: NavigationDuplicated: Avoided redundant navigation to current location but need to reload page

one way to fix is to add a timestamp to route`query

methods:  {
    clicked()  {
      this.$router.push({
        path: this.getTo,
        query: { timestamp: Date.now() } // changes every time when clicked called
      })
    }
  },

Got Uncaught (in promise) NavigationDuplicated error on invalid credentials

Looks like decision was simple, as error.response has ref to the current page:

if ( error.response.config.url != '/api/auth/login' ) {
    router.push('/login');
}

and that works for me...

vue-router — Uncaught (in promise) Error: Redirected from "/login" to "/" via a navigation guard

The error message is getting updated in the next version of vue-router. The error will read:

Redirected when going from "/login" to "/" via a navigation guard

Somewhere in your code, after being redirected to "/login", you are redirecting back to "/". And vue-router is complaining about. You'll want to make sure you only have one redirect per navigation action.

---

Related Topics