Simple Nested Dynamic Rte

Programming
,
1

I am trying to achieve the following routes.js:

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

I am trying to use a modal as a nested route to perform a task for each object. For example, the '/objects/2' route has a <nuxt-child/> component in it for adding comments with the route path '/objects/2/add-comment'.

My directory structure is as follows:

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

However, the resulting routes.js is flat. I am trying to achieve the following routes.js instead:

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

To achieve the desired routes.js structure, you can modify your directory structure and file names as follows:

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

Note the use of an underscore (_) before the add-comment in the filename. This tells Nuxt.js that this page is a dynamic route with a parameter.

Then, in your routes.js file, you can define the routes as follows:

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

Note the use of double underscores (__) to separate the dynamic route parameter (id) and the nested route (add-comment) in the component name. This tells Nuxt.js to use the correct component for the nested route.