第八阶段：工程化、质量管控与高级拓展(139天）, Nuxt.js3核心：目录路由+服务端请求+状态管理（Pinia）+ 中间件

Nuxt.js 3 核心功能详解

一、目录路由系统

基于文件系统的自动路由生成机制：

1. 基础规则

   • /pages/index.vue→ 根路由/
   • /pages/user/index.vue→/user
   • /pages/user/[id].vue→ 动态路由/user/:id

2. 嵌套路由
   创建同名目录包裹组件：

   pages/ └── parent/ ├── index.vue # /parent └── child.vue # /parent/child

3. 高级配置
   使用definePageMeta定制路由：

   <script setup> definePageMeta({ layout: "admin", // 指定布局 middleware: "auth" // 路由守卫 }) </script>

二、服务端请求处理

支持全栈开发模式：

1. API路由
   在server/api目录创建接口：

   // server/api/user.get.ts export default defineEventHandler(async (event) => { const { id } = getQuery(event) return await fetchUserFromDB(id) // 数据库操作 })

2. 数据获取方法

   • 组件内：useAsyncData+$fetch

     <script setup> const { data } = await useAsyncData('users', () => $fetch('/api/users') ) </script>

   • 服务端：useFetch（自动识别运行环境）

     // 在setup或生命周期钩子中使用 const { data } = useFetch('/api/products')

三、状态管理（Pinia集成）

替代Vuex的轻量级方案：

1. 创建Store

   // stores/counter.ts export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } })

2. 组件中使用

   <script setup> const counter = useCounterStore() </script> <template> <button @click="counter.increment"> 点击次数: {{ counter.count }} </button> </template>

3. 服务端支持
   通过useState实现SSR友好状态：

   const globalData = useState('data', () => ({ value: 1 }))

四、中间件机制

路由守卫和逻辑复用层：

1. 创建中间件

   // middleware/auth.ts export default defineNuxtRouteMiddleware((to) => { const auth = useAuthStore() if (!auth.isLoggedIn) { return navigateTo('/login') } })

2. 应用场景

   类型	作用	使用位置
   路由守卫	权限验证/重定向	页面/布局的definePageMeta
   服务端中间件	请求预处理（如设置HTTP头）	server/middleware目录
   插件中间件	应用初始化逻辑	plugins目录

3. 执行顺序

   graph LR 全局中间件-->布局中间件-->页面中间件

最佳实践：结合Nuxt 3的useRuntimeConfig管理环境变量，使用<NuxtLink>组件实现智能路由预加载，通过nuxi build生成优化产物。