Nuxt.js: Unexpected behavior with dynamic nested routes

[samirph]

My intention was to create those routes:

/blog/:category/:subcategory/:postSlug
/blog/:category/:subcategory
/blog/:category
/blog

My folder structure looks like this:

Followed these docs: https://nuxtjs.org/guide/routing#dynamic-nested-routes
Paid attention to the tag, looking at these docs: https://nuxtjs.org/api/components-nuxt-child/

Expected behavior:
/blog shows posts
/blog/:category shows posts of a category
/blog/:category/:subcategory shows posts of a subcategory
/blog/:category/:subcategory/:postSlug shows a post

Actual behavior:
/blog shows posts (content in blog/index.vue)
/blog/:category shows posts of a category (content in blog/_categorySlug.vue)
/blog/:category/:subcategory
shows posts of a category (content in blog/_categorySlug.vue)
shows posts of a subcategory (content in blog/_categorySlug/_subCategorySlug.vue)
shows content inside blog/_categorySlug/_subCategorySlug/index.vue

/blog/:category/:subcategory/:postSlug
shows posts of a category (content in blog/_categorySlug.vue)
posts of a subcategory (content in blog/_categorySlug/_subCategorySlug.vue)
content inside blog/_categorySlug/_subCategorySlug/_postSlug.vue

Screenshot when accessed /blog/cat/sub/post
Shows posts of a category, subcategory and in the end shows the post title (there's only a title saying "Post page" in _postSlug.vue)

Should it really work like this?

_{This question is available on Nuxt.js community (#c2031)}

[clarkdo]

If you don't want subpages contains content of parent, you can just remove sub-dir/index.vue or nuxt-child in it, then it will only show the content of itself page.

[samirph]

Removing the index.vue files did not change the behavior. The folder structure now looks like this:

When I remove the nuxt-child tag, always the parent _categorySlug.vue is rendered, can't access subCategorySlug nor postSlug page components.

[clarkdo]

Try moving:

1. _categorySlug.vue to blog/_categorySlug/index.vue
2. _subCategorySlug.vue to blog/_categorySlug/_subCategorySlue/index.vue

[samirph]

Following these steps and removing the original files _categorySlug.vue and _subCategorySlug.vue solved my problem. The use of nuxt-child tag was not necessary.

Thanks a lot!

It might be interesting to add to these docs https://nuxtjs.org/guide/routing#dynamic-nested-routes an additional example for this expected behavior.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.