Может ли компонент знать свои дочерние маршруты в vue-router - PullRequest
Новая
       21

Может ли компонент знать свои дочерние маршруты в vue-router

0 голосов
/ 07 февраля 2019 
<Main>
  <router-view></router-view>
</Main>

[
  {
    path: '/',
    component: Intro,
  },
  {
    path: '/path1',
    component: Main,
    children: [{},{},{}]
  },
  {
    path: '/path2',
    component: Main,
    children: [{},{},{},{},{}]
  }
]

Я хочу, чтобы Main знал, какие дочерние маршруты определены для него.

Я создал функцию для обхода всего объекта маршрутов и выяснения его, но он оценивается по-другомув зависимости от this.$router.currentRoute, что делает его многословным, пугающим и более сложным, чем больше вариантов пути у детей.Есть ли прямой способ для родительского компонента узнать, где он находится в маршрутах, и иметь список его дочерних элементов?

IE в основном компоненте, как узнать, сколько у меня детей и какой из нихв настоящее время активен?

1 Ответ

0 голосов
/ 07 февраля 2019

Это решит вашу проблему?Вот пример кода .Все, что вам нужно знать и установить - название маршрута (даже больше - вы можете вместо этого использовать meta или даже path свойства).Вы даже можете создать рекурсивную функцию, которая будет искать каждый маршрут, включая каждый массив children.

Вот простая функция для поиска дочерних компонентов, зная имя родительского пути: 

function recursiveChildrenSearch(routes, name) {
  for (let route of routes) {
    if (route.name === name)
      return route.children;
    else if (route.children.length > 0)
      return recursiveChildrenSearch(route.children, name);
  }
}

Можетбудет вызываться так: 

recursiveChildrenSearch(router.options.routes, "one")

Вызывается на примере объекта маршрута: 

routes: [
    {
      path: '/hello',
      name: "main",
      component: A,
      children: [
        {name: 'one', path: '1', component: B, 
          children: [
              {name: 'subone', path: '1.1', component: C}
          ]},
        {name: 'two', path: '2', component: C},
      ],
    },
  ]

вернет: 

[Object { name: "subone", path: "1.1", component: {…} }]
...