上一讲完成了最小 Nuxt3 应用，我们体验了一下多页面写法。实际开发中情况会复杂得多，比如路由嵌套，动态路由等等。本节我们创建个人博客的基本结构，恰好会用到以下知识点：

• 嵌套路由；
• 动态路由；
• 页面布局。

# 基于文件的路由

如果发现项目根目录下存在 pages 目录，Nuxt 会自动整合 vue-router，并且根据 pages 目录中的文件创建 routes 配置。

# 目前的页面结构

目前我们的页面由主页和详情页构成：

• 主页：index.vue 负责显示文章列表；
• 详情页：detail.vue 负责显示文章详细内容。

diff
复制代码pages/
--- index.vue
--- detail.vue

前面的文件结构，生成的路由配置大概像下面这样：

lua
复制代码[
  {
    path: '/',
    component: '~/pages/index.vue',
  },
  {
    path: '/detail',
    component: '~/pages/detail.vue',
  }
]

虽然免去繁琐的配置工作，但是需要我们首先去了解一下约定好的映射规则，下面我们先看一下动态路由。

# 动态路由

如果文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。比如我们像下面这样修改文件结构：

diff
复制代码pages/
--- index.vue
--- detail-[id].vue

我们可以在detail-[id].vue中访问id这个参数:

arduino
复制代码<template>
  {{ $route.params.id }}
</template>

对应的我们在主页中添加一篇文章链接：/detail-1

ini
复制代码<NuxtLink to="/detail-1">detail 1</NuxtLink>

效果非常理想！