vue.jsnuxt.js

How to create recursive dynamic routes


In Nuxt it's very easy to create dynamic route levels, for example:

blog/[category-handle]/[article-handle]

or blog/category/[category-handle] & blog/article/[article-handle]

However in my example, categories can have child categories and could be x deep.

For example:

In this case, I would like my URL structure to be:

blog/animals-pets/[article-handle]

blog/animals-pets/animal-health/[article-handle]

blog/animals-pets/animal-health/animal-hospital/[article-handle]

The code would be the same in each category page, just changing content/breadcrumbs etc based on the depth.


Solution

  • This is what the catch-all is for: https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route

    Do your logic there to see if the route on which the user arrived is a deeply nested one or (if nothing matches your backend) redirect him to a 404.