CODEWITHSUNDEEP
nuxt.jsnuxt-link
Jason
Jason

Reputation: 7682

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

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>

Upvotes: 1

Views: 1470

Answers (1)

Nicolas Pennec
Nicolas Pennec

Reputation: 7631

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

Upvotes: 1

Related Questions