Nuxt.js 中的简单嵌套动态路由答案

【问题标题】：Simple Nested Dynamic Route in Nuxt.jsNuxt.js 中的简单嵌套动态路由
【发布时间】：2020-04-24 19:29:19
【问题描述】：

我想使用模式作为嵌套路由来为每个对象执行任务。例如，'/objects/2' 路由中有一个 <nuxt-child/> 组件，用于在具有路由路径 '/objects/2/add-comment' 的模态中添加 cmets。

我有下面的目录结构，但这不会创建嵌套路由。我做错了什么？

pages/
--| objects/
----| _id/
------| index.vue
------| add-comment.vue
----| index.vue

得到的 routes.js 是平坦的：

routes: [{
    path: "/objects/:id?",
    component: _45173a6a,
    name: "objects-id"
  }, {
    path: "/objects/:id?/add-comment",
    component: _14a12353,
    name: "object-id-add-comment"
  }, {
...

【问题讨论】：

也获得了带有子路由的最新 nuxtjs，但我的 router.js 文件看起来和你的一模一样，但一切都按预期工作
但是添加评论页面不被当做子组件，在modal后面，是空白的，而不是显示对象详情。
如果你想使用<nuxt-child/>组件，然后尝试在objects文件夹的同一级别放置一个新文件，称为objects.vue，并在此处使用子组件
但是objects.vue 不会有参数id。我想我明白了。感谢您的反馈！

标签： vue.js nuxt.js

【解决方案1】：

这是我需要的目录结构：

pages/
--| objects/
----| _id/
------| add-comment.vue
----| _id.vue

导致嵌套路由配置：

routes: [{
    path: "/objects/:id?",
    component: _45173a6a,
    name: "objects-id"
    children: [{
        path: "add-comment",
        component: _14a12353,
        name: "object-id-add-comment"
    }],
},
...

【讨论】：