如何在父页面上列出nuxt.js嵌套路由的子页面？

Question

是否可以查询父母的孩子或嵌套路线？一个示例可能是具有以下结构的博客网站：

• fromMaybe（父页面）
  • maybe
  • /blog.vue
• 等/blog/article1.vue可能会或可能不会使用/blog/article2.vue。

如何blog.vue以编程方式列出其子页面或嵌套路线，以便可以显示包含导航到这些子页面的链接和标题的菜单或目录？

<nuxt-child>文档中提到nuxt路由器具有用于路由的子属性。似乎可以在<nuxt-child\>上访问。有更好的方法吗？

Answer 1

如果您想按相对路径访问子组件，那么处理它的最佳解决方案是_slug动态路由，

//// for example 

pages/
--| _blog/
-----| index.vue
-----| article1.vue
-----| article2.vue
--| users/
-----| _id.vue
--| 

Answer 2

希望有人能提供更好的答案，但与此同时，类似的方法也可以：

data () {
  return {
    nestedRoutes: []
  }
},
created () {
  this.$router.options.routes.forEach((routeOption) => {
    if (routeOption.path.startsWith(this.$route.path)) {
      this.nestedRoutes.push({
        name: routeOption.name,
        path: routeOption.path,
      })
    }
  })
}