NuxtJS child dynamic pages not being navigated to/rendering with nuxt-link

Question

If my file structure is:

- pages
-- catrules.vue
-- catrules/
---- _id.vue

The child page does not render (but the url updates and the page stays on the parent): <nuxt-link :to="'/catrules/' + catrule.slug">{{ catrule.ruleid }}</nuxt-link>

If I change the name of the the directory catrules to catrule, then everything works as expected:

- pages
-- catrules.vue
-- catrule/
---- _id.vue

<nuxt-link :to="'/catrule/' + catrule.slug">{{ catrule.ruleid }}</nuxt-link>

Answer 1

you have to use this structure:

- pages
-- catrules/
---- _id.vue
---- index.vue

So just rename your pages/catrules.vue as pages/catrules/index.vue

see https://nuxtjs.org/guide/routing#nested-routes