Nuxt路由多级

Question

有人可以解释一下如何使用 nuxt 添加多级（子）路径。我的项目结构是：

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

基本上我的链接是这样的：

http://localhost/events

将显示事件列表

http://localhost/events/{id}

将显示事件信息和一些类别

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

会显示事件类别信息

我试过构建文件夹和子文件夹的结构，但没有用。
我尝试在事件 <nuxt-child/> 中使用内部 _id.vue，但没有用。

有人知道如何解决这个问题吗？

先谢谢你。

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 或动态“_”。

名称（类别）也保持一致