Catch all routes in NuxtJS pages routing

I have this page route in NuxtJS:

pages/_book.vue

So that when I go to localhost:3000/my-book, params.book is equal to “my-book” as expected.

However some books are nested deep inside several directories. I want to get the full route as params.book. These routes should be separated by “/”. For example, localhost:3000/finance/strategies/experts should make params.book equal to “finance/strategies/experts”.

How can I achieve this?

Note that since the directory structure is unknown (i.e. I can’t just create a structure like pages/_book/_type/_level.vue)

Answer

You can use Unknown Dynamic Nested Routes to match routes that are not caught by other patterns.

With this file tree:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

It will behave like this

/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue