Nuxt 的路由结构系统（七）

基本路由配置

在 Nuxt.js 中，每个 .vue 文件在 pages/ 目录下都会自动成为一个路由。文件名决定了路由的路径。例如：

pages/
|-- index.vue       # 映射到根路径 '/'
|-- about.vue       # 映射到路径 '/about'
|-- contact.vue     # 映射到路径 '/contact'

动态路由

Nuxt.js 支持动态路由。你可以通过在文件名中使用 [id] 或 [slug] 来创建动态路由：

pages/
|-- _slug/
|   |-- index.vue   # 映射到路径 '/:slug'
|   `-- post.vue    # 映射到路径 '/:slug/post'
|-- [id].vue         # 映射到路径 '/:id'

对应的 .vue 文件中，你可以使用 this.$route.params 来访问路由参数：

<template>
  <div>
    <h1>Post ID: {{ this.$route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  // 页面逻辑...
}
</script>

嵌套路由

Nuxt.js 也支持嵌套路由。如果你的目录结构和文件名相同，Nuxt.js 会自动为你创建嵌套路由：

pages/
|-- users/
|   |-- _id.vue     # 嵌套路由，映射到路径 '/users/:id'
|   `-- index.vue   # 嵌套路由，映射到路径 '/users'

在父组件中，你可以使用 组件来显示嵌套子组件的内容：

<template>
  <div>
    <h1>Users</h1>
    <NuxtChild :foobar="123" /> <!-- 使用 props 传递数据给子组件 -->
  </div>
</template>

异步数据加载

Nuxt.js 允许你在页面组件中使用 asyncData 函数来异步加载数据，并将其作为页面的初始数据：

<script>
export default {
  async asyncData({ params }) {
    // 可以在这里进行异步操作，如 API 调用
    const data = await fetchDataFromApi(params.id)
    return { item: data }
  }
}
</script>

命名视图

Nuxt.js 支持命名视图，允许你定义具有相同路径但不同逻辑的多个页面：

pages/
|-- posts.vue        # 映射到路径 '/posts'
|-- posts/
|   |-- _slug.vue     # 映射到路径 '/posts/:slug'

在 posts.vue 中，你可以定义一个列表页面，而在 posts/_slug.vue 中，你可以定义一个详情页面。

中间件

你还可以在页面级别定义中间件来处理诸如认证之类的逻辑：

<script>
export default {
  middleware: 'authenticated' // 引用中间件
}
</script>

配置 nuxt.config.js

虽然大多数情况下 Nuxt.js 的路由系统可以自动工作，但有时你可能需要自定义路由配置。这可以通过 nuxt.config.js 文件来实现：

// nuxt.config.js
export default {
  router: {
    // 路由配置选项...
  }
}

Nuxt.js 的路由系统非常灵活，它允许你通过文件系统来定义路由，同时提供了动态路由、嵌套路由、异步数据加载和中间件等功能，以满足各种复杂的路由需求。通过合理地组织你的 pages/ 目录，你可以轻松地构建出一个结构清晰、易于维护的路由系统。