nuxt3嵌套路由使用

### Nuxt 3 中嵌套路由的使用指南 在 Nuxt 3 中，嵌套路由是基于文件系统的路由生成机制实现的。开发者可以通过 `pages` 目录中的文件夹和文件结构来自动生成嵌套路由[^4]。 #### 嵌套路由的基本原理 Nuxt 的嵌套路由依赖于文件系统的设计模式。当在一个子目录中创建多个 `.vue` 文件时，这些文件会被视为父级路由下的子路由。例如： 如果存在以下文件结构： ``` /pages/ users/ index.vue // 对应 /users profile.vue // 对应 /users/profile ``` 这会自动生成如下路由配置： ```javascript [ { path: '/users', component: () => import('~/pages/users/index.vue'), children: [ { path: 'profile', component: () => import('~/pages/users/profile.vue') } ] } ] ``` #### 实现嵌套路由的具体方法 ##### 方法一：通过文件夹组织嵌套路由 假设我们需要构建一个用户管理模块，其中包含用户的列表页面 (`index`) 和详情页面 (`details`)。可以按照以下方式组织文件结构： ``` /pages/ users/ index.vue // 用户列表页面 -> /users details.vue // 用户详情页面 -> /users/details ``` 在这种情况下，访问 `/users` 将显示用户列表页面，而访问 `/users/details` 则会进入用户详情页面。 ##### 方法二：动态嵌套路由 对于需要传递参数的情况（如用户 ID），可以在路径中加入 `[param]` 动态占位符。例如： ``` /pages/ users/ index.vue // 用户列表页面 -> /users [userId].vue // 单个用户详情页面 -> /users/:userId ``` 这样，访问 `/users/123` 时，Nuxt 会匹配到 `[userId].vue` 并将 `123` 作为参数传入组件。 ##### 方法三：多层嵌套路由 更复杂的场景可能涉及多层嵌套。比如，展示某个项目的任务列表及其具体任务详情： ``` /pages/ projects/ index.vue // 所有项目列表 -> /projects [projectId]/ // 特定项目下的内容 tasks/ // 该项目的任务列表 index.vue // 任务列表 -> /projects/:projectId/tasks [taskId].vue // 具体任务详情 -> /projects/:projectId/tasks/:taskId ``` 这种结构能够清晰地表达父子关系，并且无需手动编写任何额外的路由配置。 --- ### 示例代码 以下是完整的嵌套路由示例代码： #### 文件结构 ``` /pages/ blog/ _id.vue // 文章详情页 -> /blog/:id comments.vue // 文章评论页 -> /blog/comments index.vue // 文章首页 -> /blog ``` #### 组件代码 **`index.vue`** ```vue <template> <div> <h1>Blog Home</h1> <ul> <li v-for="post in posts" :key="post.id"> <NuxtLink :to="'/blog/' + post.id">{{ post.title }}</NuxtLink> </li> </ul> </div> </template> <script setup> const posts = [ { id: 1, title: 'Post One' }, { id: 2, title: 'Post Two' } ]; </script> ``` **`_id.vue`** ```vue <template> <div> <h1>Post Details</h1> <p>ID: {{ $route.params.id }}</p> </div> </template> ``` **`comments.vue`** ```vue <template> <div> <h1>Comments Page</h1> </div> </template> ``` --- ### 总结 以上展示了如何利用 Nuxt 3 的文件系统路由功能快速搭建嵌套路由。无论是简单的两层嵌套还是复杂多层次的嵌套，都可以通过合理的文件夹规划完成。这种方式不仅简化了开发流程，还提高了代码的可维护性[^4]。 ---