Vue.js - NavigationDuplicated 与新路径

Posted 2023-02-22

【中文标题】Vue.js - NavigationDuplicated 与新路径

【英文标题】：Vue.js - NavigationDuplicated with new path

【发布时间】：2020-12-05 19:56:43

【问题描述】：

我需要关于 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" )

例如，我收到以下路线历史记录的错误：

localhost:8080/#/kb localhost:8080/#/faq/new localhost:8080/#/kb localhost:8080/#/faq/new ---> 这里出现 NavigationDuplicated 错误

在这张图片中，你可以看到 Vue 扩展为 Chrome 注册的路由历史：Routes history

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

【参考方案1】：

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

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

【讨论】：

感谢您的回答。我阅读了链接，但他们没有回答我的问题。如果您仔细阅读我的路线历史记录，您会发现我在从 .../kb 路由到 .../faq/new 时得到“NavigationDuplucated”。另外，我希望找到解决方法而不是忽略错误。

@NicolaMassarenti 您使用的是哪个版本的 vue-router？

我无法重现您的错误，因此 vue-router check 的主要贡献者都没有抱怨过这个问题以及像您这样的意外导航错误，目前处理此错误的唯一方法是捕获它changePage() this.$router.push( name: "f n" ).catch((error) => //log error); ,

您也可以参考this，作为基于Promise的路由器，您可以等待答案，同样在同一个线程中，您可以找到全局处理导航错误的方法，但有时它们也有自己的缺点

还有一点注意，最好在路由中添加这样的组件： path: '/page', name: 'page', component: () => import(/* webpackChunkName: name_that_displayed_when_component_loaded */ "path/to/Component.vue") , 所以只有当用户点击链接时才会导入这个组件