Vue Router 中如何处理重复的子路由答案

【问题标题】：How to deal with duplicate child routes in Vue RouterVue Router 中如何处理重复的子路由
【发布时间】：2020-05-31 20:12:53
【问题描述】：

我正在做一个项目，我想在不同的路线中显示两个组件（ProductionPlot 和 RnpPlot）。这是我在路由器文件夹中的 index.js 文件：

import Vue from 'vue'
import Router from 'vue-router'
import ProductionPlots from '@/components/ProductionPlots'
import RnpPlots from '@/components/RnpPlots'
import Lessons from '@/components/Lessons'
import LessonOne from '@/components/AllLessons/LessonOne'
import LessonTwo from '@/components/AllLessons/LessonTwo'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Lessons',
      component: Lessons
    },
    {
      path: '/lesson-one',
      name: 'LessonOne',
      component: LessonOne,
      redirect: { name: 'ProductionPlots'},
      children: [
        { path: 'production-plot', name: 'ProductionPlots', component: ProductionPlots },
        { path: 'rta-plot', name: 'RnpPlots', component: RnpPlots }
      ]
    },
    {
      path: '/lesson-two',
      name: 'LessonTwo',
      component: LessonTwo,
      redirect: { name: 'ProductionPlots'},
      children: [
        { path: 'production-plot', name: 'ProductionPlots', component: ProductionPlots },
        { path: 'rta-plot', name: 'RnpPlots', component: RnpPlots }
      ]
    }
  ]
})

但我在控制台中收到以下警告：

[vue-router] 重复命名路由定义：{ 名称：“ProductionPlots”，路径：“/lesson-two/production-plot”} [vue-router] 重复命名路由定义：{ name: "RnpPlots", path: "/lesson-two/rta-plot" }

当我点击第二条路线（/lesson-two/production-plot）时，将显示第一条路线（/lesson-one/production-plot）。

我该如何解决这个问题？请帮助我，因为我在 stackoverflow 或谷歌上找不到这个问题。

谢谢，

哈桑

【问题讨论】：

您在 lesson-one 和 lesson-two.. 的每条路线上显示相同的组件，具有相同的名称。

标签： vue.js router

【解决方案1】：

只需更改每个子路由上的“名称”。例如，我有两条路线都有“电池”的子路线。对于其中一个上的name，我使用了“product-batteries”并将另一个保留为“batteries”，如下所示：

path: 'batteries',
name: 'product-batteries',
component: ProductBatteries

path: 'batteries',
name: 'batteries',
component: Batteries

那么当使用router-link时，你只需调用要使用的名称。

【讨论】：