Nuxt child: parent route works incorrectly

Question

This is my files tree:

pages/
-index.vue   (1)
-index/
--_id.vue    (2)

I expect:

• if route is mydomain.com -> render index.vue (1) only
• if route is mydomain.com/foo -> render _id.vue (2) inside index.vue (1)

When I don't have a parameter for the child component I want the Nuxt child not to render at all, but Nuxt render it with id value of undefined. Vue router do it correctly.

This is JSFiddle like Nuxt behavior: https://jsfiddle.net/maxmets/95ctse8d/ (line 16 path: '/:id?')

This is JSFiddle I want (Vue router): https://jsfiddle.net/maxmets/rvmxg2f7/ (line 16 path: '/:id')

The different is only in ? symbol. When Nuxt automatically create object of routes it add ? How to make the Nuxt router work as correctly as the Vue router?

Answer 1

You could try this Nested Route method:

pages/
-index.vue   (1)
-index/
--_id.vue    (2)
--_index.vue    (3)

In index/index.vue, you can just render empty template

<template>
  <div></div>
</template>

This maybe not be the cleanest way to do, but it should get the job done.

OR

But if you choose to define your own router, you can check out Nuxt Router Extra Module