Nuxt.js 3 核心功能详解一、目录路由系统基于文件系统的自动路由生成机制基础规则/pages/index.vue→ 根路由//pages/user/index.vue→/user/pages/user/[id].vue→ 动态路由/user/:id嵌套路由创建同名目录包裹组件pages/ └── parent/ ├── index.vue # /parent └── child.vue # /parent/child高级配置使用definePageMeta定制路由script setup definePageMeta({ layout: admin, // 指定布局 middleware: auth // 路由守卫 }) /script二、服务端请求处理支持全栈开发模式API路由在server/api目录创建接口// server/api/user.get.ts export default defineEventHandler(async (event) { const { id } getQuery(event) return await fetchUserFromDB(id) // 数据库操作 })数据获取方法组件内useAsyncData$fetchscript setup const { data } await useAsyncData(users, () $fetch(/api/users) ) /script服务端useFetch自动识别运行环境// 在setup或生命周期钩子中使用 const { data } useFetch(/api/products)三、状态管理Pinia集成替代Vuex的轻量级方案创建Store// stores/counter.ts export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), actions: { increment() { this.count } } })组件中使用script setup const counter useCounterStore() /script template button clickcounter.increment 点击次数: {{ counter.count }} /button /template服务端支持通过useState实现SSR友好状态const globalData useState(data, () ({ value: 1 }))四、中间件机制路由守卫和逻辑复用层创建中间件// middleware/auth.ts export default defineNuxtRouteMiddleware((to) { const auth useAuthStore() if (!auth.isLoggedIn) { return navigateTo(/login) } })应用场景类型作用使用位置路由守卫权限验证/重定向页面/布局的definePageMeta服务端中间件请求预处理如设置HTTP头server/middleware目录插件中间件应用初始化逻辑plugins目录执行顺序graph LR 全局中间件--布局中间件--页面中间件最佳实践结合Nuxt 3的useRuntimeConfig管理环境变量使用NuxtLink组件实现智能路由预加载通过nuxi build生成优化产物。