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
)
Advertisement
Answer
You can use Unknown Dynamic Nested Routes to match routes that are not caught by other patterns.
With this file tree:
JavaScript
x
7
1
pages/
2
--| people/
3
-----| _id.vue
4
-----| index.vue
5
--| _.vue
6
--| index.vue
7
It will behave like this
JavaScript
1
7
1
/ -> index.vue
2
/people -> people/index.vue
3
/people/123 -> people/_id.vue
4
/about -> _.vue
5
/about/careers -> _.vue
6
/about/careers/chicago -> _.vue
7