Navigation Duplicated in Nuxt.js

July 17, 2023

In my project I set up a simple nuxt2 with routing but when page refresh it show the error
NavigationDuplicated: Avoided redundant navigation to current location: "/haendler-details/1404-distilled-gin"

>Solution :

The error message you’re seeing, "NavigationDuplicated: Avoided redundant navigation to current location," typically occurs in Nuxt.js when you try to navigate to the same route that you’re already on. This error is thrown by Vue Router, which is the routing library used by Nuxt.js.

To avoid this error, you can use one of the following approaches:

1.Use the router-link component with the exact prop:

<router-link to="/haendler-details/1404-distilled-gin" exact>Go to Distilled Gin</router-link>

2.Catch the NavigationDuplicated error and handle it gracefully:

// In your main.js or equivalent
import Vue from 'vue';
import VueRouter from 'vue-router';

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => {
    if (err.name !== 'NavigationDuplicated') {
      throw err;
    }
  });
};

// In your component
this.$router.push('/haendler-details/1404-distilled-gin');