Vue.js - NavigationDuplicated 与新路径

Question

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

即使我没有推送同一个网页，我也会收到“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”错误吗？我该如何解决这个问题？

Answer 1

这里有first和second的解释和解决方案，也可以查看here和here。

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