Vue.js-NavigationDuplicated与新路径

编程问答 2022-08-16

问题描述

我需要有关 Vue.js 和 NavigationDuplicated 错误的帮助。我正在开发一个Web应用程序，允许用户在不同页面之间导航。

即使我没有推送同一网页，我也会收到“ NavigationDuplicated”错误。具体来说，我得到的错误是：

消息：“不允许导航到当前位置（” / faq / new”），名称：“ NavigationDuplicated”，...

我的路由器代码如下：

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;

在每个视图中，都有一个按钮重定向到另一个视图。例如，单击按钮后，将执行以下代码：

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

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

例如，以下路线历史记录显示错误信息：

  1. localhost：8080 /＃/ kb
  2. localhost：8080 /＃/ faq / new
  3. localhost：8080 /＃/ kb
  4. localhost：8080 /＃/ faq / new --->在这里，我得到了NavigationDuplicated错误

在此图片中，您可以看到Vue扩展程序为Chrome注册的路线的历史记录：Routes history

您能帮助我理解为什么会出现“ NavigationDuplicated”错误吗？我该如何解决这个问题？

解决方法

这里有first和second的说明和解决方案，您还可以检查here和here。

基本上只是捕获并忽略该消息。

javascriptrouterroutervue.js