1

I need help with Vue.js and the NavigationDuplicated error. I am developing a web application where I allow the user to navigate among different pages.

I get "NavigationDuplicated" error even though I am not pushing the same web page. Specifically, the error I get is:

message: "Navigating to current location ("/faq/new") is not allowed", name: "NavigationDuplicated", ...

My router code is the following:

import Vue from "vue";
import VueRouter from "vue-router";

import HomeView from "../views/HomeView.vue";
import KBView from "../views/KBView.vue";
import FaqDetailView from "../views/FaqDetailView.vue";
import NewFaqView from "../views/NewFaqView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: HomeView
  },
  {
    path: "/kb",
    name: "Knowledge Base",
    component: KBView
  },
  {
    path: "/faq/:id",
    name: "Faq details",
    component: FaqDetailView
  },
  {
    path: "/faq/new",
    name: "New faq",
    component: NewFaqView
  }
];

const router = new VueRouter({
  routes
});

export default router;

In each View, there is a button that is redirecting to another View. For example, once a button is clicked, is executed the following code:

this.$router.push({ name: "Knowledge Base" });

this.$router.push({ name: "New faq" })

I get the error with, for example, the following history of routes:

  1. localhost:8080/#/kb
  2. localhost:8080/#/faq/new
  3. localhost:8080/#/kb
  4. localhost:8080/#/faq/new ---> Here i get the NavigationDuplicated error

In this pic, you can see the history of routes registered by Vue extension for Chrome: Routes history

Could you help me in understanding why I get the "NavigationDuplicated" error? How can I fix this problem?

F. Müller
  • 3,969
  • 8
  • 38
  • 49
Nicola Massarenti
  • 21
  • 1

1 Answers1

1

Here explanations and solutions first and second, also you can check here and here.

Basically just catch and ignore that message.

Arman
  • 481
  • 4
  • 12
  • Thanks for your answer. I read the links but they do not answer to my question. If you read carefully my history of routes, you see that I get "NavigationDuplucated" when routing from _.../kb_ to _.../faq/new_. In addition, I would like to find a resolution rather than ignoring the error. – Nicola Massarenti Aug 18 '20 at 09:16
  • @NicolaMassarenti which version of vue-router are you using? – Arman Aug 18 '20 at 13:40
  • I could not reproduce your error and so neither main contributor of vue-router [check](https://github.com/vuejs/rfcs/pull/150) many people already complained about this and about unexpected navigation errors like yours for now only way to handle this error is to catch it `changePage(){ this.$router.push({ name: "f n" }).catch((error) => {//log error}); },` – Arman Aug 18 '20 at 14:07
  • also you can reference [this](https://github.com/vuejs/rfcs/pull/150#issuecomment-610056845), as router Promise based you can await answer, also in same thread you can find ways to handle navigation errors globally but they have own drawbacks sometimes – Arman Aug 18 '20 at 14:14
  • also little note that better add component in routing like this: `{ path: '/page', name: 'page', component: () => import(/* webpackChunkName: name_that_displayed_when_component_loaded */ "path/to/Component.vue") },` so this component will be imported only when user follows link – Arman Aug 18 '20 at 15:12