I want to have(created) dynamic route like as provided in nuxt docs

pages/projects/
              /_id.vue
              /_id/details.vue

But everytime I call url localhost/projects/1/details/ , it is rendering _id.vue page instead of /_id/details.vue !! How to do correctly ?

I want to have(created) dynamic route like as provided in nuxt docs

pages/projects/
              /_id.vue
              /_id/details.vue

But everytime I call url localhost/projects/1/details/ , it is rendering _id.vue page instead of /_id/details.vue !! How to do correctly ?

• javascript
• node.js
• nuxt.js

2 Answers 2

Your _id.vue structure should contain <nuxt-child> ponent in order to render it's child details.vue correctly.

Your folder structure then looks like this:

└── pages
    └── projects
        ├── _id
        │   └── details.vue
        └── _id.vue

Having this folder structure produces router with setup like this:

routes: [
    {
        path: "/projects/:id?",
        ponent: ProjectsId,
        name: "projects-id",
        children: [
            {
                path: "details",
                ponent: ProjectsIdDetails,
                name: "projects-id-details"
            }
        ]
    },

That means your code could look something like this:

_id.vue

<template>
  <div>
    <h1>(_id.vue) Project: {{ $route.params.id }}</h1>
    <nuxt-child/>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

_id/details.vue

<template>
  <div>
    (_id/details.vue) Project: {{ $route.params.id }}
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

TIP: If you e to situation where you are not sure about your routing, open your .nuxt/router.js after nuxt build is done. There you will find function createRouter() which will help you debug routes.

You have to config Nuxt-Child. Take a look https://nuxtjs/api/ponents-nuxt-child