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

Question

是否可以查询 parent 的 child 或嵌套路线？一个示例可能是具有这种结构的博客站点:

• /blog.vue (父页面)
  • /blog/article1.vue
  • /blog/article2.vue
• 等blog.vue可能会也可能不会使用 <nuxt-child\> .

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

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

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