Как бороться с дублирующимися дочерними маршрутами в Vue Router - PullRequest
Новая
       10

Как бороться с дублирующимися дочерними маршрутами в Vue Router

0 голосов
/ 17 февраля 2020

Я работаю над проектом, в котором я хочу показать два компонента (ProductionPlot & RnpPlot) в разных маршрутах. Это мой индекс. 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] Duplicate named определение маршрутов: {name: "ProductionPlots", путь: "/ lesson-two / production-plot"} [vue -router] Дублирующее определение именованных маршрутов: {name: "RnpPlots", path: "/ lesson-two / rta-plot "}

при нажатии на второй маршрут (/ lesson-two / production-plot) будет показан первый маршрут (/ lesson-one / production-plot).

Как я могу решить эту проблему? Пожалуйста, помогите мне, так как я не смог найти эту проблему в stackoverflow или в Google.

Спасибо,

Хасан

1 Ответ

0 голосов
/ 16 апреля 2020

Просто измените «имя» на каждом дочернем маршруте. Например, у меня есть два маршрута, которые оба имеют дочерний маршрут «батарейки». Для name на одной из них я использовал «product-battery», а другую оставил как «батареи», вот так: 

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

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

Затем при использовании router-link вы просто назовите какое имя использовать.

...