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生成优化产物。