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 </nuxt-child> 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?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2031">#c2031</a>)</em></sub></div>