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

【问题标题】：How to list children pages of a nuxt.js nested route on the parent page?如何在父页面上列出 nuxt.js 嵌套路由的子页面？
【发布时间】：2018-10-13 17:36:27
【问题描述】：

是否可以查询父级的子级或嵌套路由？一个示例可能是具有这种结构的博客网站：

/blog.vue（父页面）
- /blog/article1.vue
- /blog/article2.vue
等。 blog.vue 可能会也可能不会使用<nuxt-child\>。

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

<nuxt-child> 文档提到 nuxt 路由器具有用于路由的 children 属性。这似乎可以通过this.$router.options.routes 访问。有没有更好的办法？

【问题讨论】：

请注意，nuxt/content 模块现在可用（截至 2020 年），它可以处理许多与原始问题相关的场景。 content.nuxtjs.org

标签： nuxt.js

【解决方案1】：

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

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,
      })
    }
  })
}

【讨论】：

【解决方案2】：

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

//// for example 

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

【讨论】：

我的问题是如何以编程方式获取动态路由列表，以便可以将所有动态路由或子路由的列表呈现为索引页面中的 href。