组件可以知道 vue-router 中的子路由吗

Question

<Main>
  <router-view></router-view>
</Main>

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

我想Main知道为其定义了哪些子路由。

我创建了一个函数来爬行整个路线对象并找出它，但它的评估方式不同，具体取决于this.$router.currentRoute哪个使得它变得冗长和可怕，并且子级中的路径选项越多就越复杂。有没有一种简单的方法可以让父组件知道它在路由中的位置并拥有其子组件的列表？

IE 在主要组件中如何知道我有多少个孩子以及其中哪些当前处于活动状态？

Answer 1

这能解决您的问题吗？这是一个示例 codepen。您需要了解和设置的所有内容 - 路线名称（甚至更多 - 您可以使用meta甚至path属性）。您甚至可以创建递归函数，它将搜索每条路线，包括每条路线children数组在内的每条路线。

\n\n

这是一个简单的函数，用于搜索知道父路径名的子组件：

\n\n

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

\n\n

可以这样调用：

\n\n

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

\n\n

调用示例路由对象：

\n\n

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

\n\n

将返回：

\n\n

[Object { name: "subone", path: "1.1", component: {\xe2\x80\xa6} }]\n

\n