基本路由配置
在 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/ 目录，你可以轻松地构建出一个结构清晰、易于维护的路由系统。
