Nuxt routing multiple levels - vue.js

Question

Could somebody explain how to add a multi levels (children) path using nuxt. The structure of my project is:
├root
│ ├── events
│ ├── _id.vue
│ ├── cateogries
│ └── _id.vue
Basically my links are like this:
http://localhost/events
Will display a list of events
http://localhost/events/{id}
Will display the event information plus some categories
http://localhost/events/{id}/category/{id}
Will display the event category information
I've tried doing the structure of the folders and subfolders and is not working.
I've tried to use inside _id.vue from events <nuxt-child/> and is not working.
Does anyone has any ideas how to solve this?
Thank you in advanced.

Answer 1

First, not duplicate id param, use other name.
you can use such a structure:
├pages
│ ├── events
│ ├── _eid
│ ├── category
| |__ index.vue
│ └── _id.vue
_id.vue for http://localhost:3000/events/2/category/5
<template>
<div>
{{ $route.params }} //{ "eid": "2", "id": "5" }
Hello from _id
</div>
</template>
For each level add index.vue or a dynamic "_".
Also be consistent in names (category or categories)