Nuxt маршрутизация нескольких уровней

Question

Может кто-нибудь объяснить, как добавить многоуровневый (дочерний) путь, используя nuxt.Структура моего проекта:

├root
│  ├── events
│      ├── _id.vue
│      ├── cateogries
│          └── _id.vue

В основном мои ссылки выглядят так:

http://localhost/events

Будет отображаться список событий

http://localhost/events/{id}

Будет отображатьсяинформация о событии плюс некоторые категории

http://localhost/events/{id}/category/{id}

Будет отображаться информация о категории события

Я пытался создать структуру папок и подпапок и не работает.Я пытался использовать внутри _id.vue из событий <nuxt-child/> и не работает.

У кого-нибудь есть идеи, как решить эту проблему?

Спасибо заранее.

Answer 1

Во-первых, не дублируйте параметр id, используйте другое имя.

Вы можете использовать такую ​​структуру:

├pages
│  ├── events
│      ├── _eid
│          ├── category
|             |__ index.vue
│             └── _id.vue

_id.vue для http://localhost:3000/events/2/category/5

<template>
    <div>
    {{ $route.params }} //{ "eid": "2", "id": "5" }

    Hello from _id
    </div>    
</template>

Для каждого уровня добавьте index.vue или динамическое "_".

Также будьте последовательны в именах (категориях или категориях)