I'm facing an issue with Vue.js and the NavigationDuplicated error. As I work on a web application that involves navigation across various pages, I encounter the "NavigationDuplicated" error unexpectedly.
Even though I'm not attempting to navigate to the same page, I receive the following error message:
message: "Navigating to current location ("/faq/new") is not allowed", name: "NavigationDuplicated", ...
Below is a snippet of my router code:
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;
My issue arises when navigating between different views using buttons. For instance, clicking on a button executes the following code:
this.$router.push({ name: "Knowledge Base" });
this.$router.push({ name: "New faq" })
The error occurs when navigating through the following route sequence:
- localhost:8080/#/kb
- localhost:8080/#/faq/new
- localhost:8080/#/kb
- localhost:8080/#/faq/new ---> Here i get the NavigationDuplicated error
For reference, here's a view of the route history as captured by the Vue extension for Chrome: Routes history
I'm seeking assistance to understand the root cause of the "NavigationDuplicated" error and how I can resolve this issue. Any help would be greatly appreciated.