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: {…} }]

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

1 个答案: