组件可以在 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

这会解决您的问题吗？这是sample codepen。您需要知道和设置的所有内容 - 路由名称（甚至更多 - 您可以改用 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: {…} }]