课程演示项目

版本 A：NuxtLink（声明式）

适合列表链接、需要预取与可右键新开页的场景。

• 1.课程介绍 — 为什么选 Nuxt：SSR / SEO / 全栈
• 2.项目搭建 — Nuxt 4 app 目录与开发命令
• 3.路由即页面 — pages、动态路由、useHead
• 4.布局系统 — default / admin 布局切换
• 5.组件自动导入 — AppHeader、Lazy、ClientOnly
• 6.生命周期 — SSR 友好的钩子演示
• 7.数据获取 — useFetch / lazy / $fetch
• 8.状态管理 — useState / Pinia / useCookie
• 9.中间件 — 路由守卫与登录拦截
• 10.常用组件 — NuxtLink / LoadingIndicator
• 11.服务端API — server/api 与 SSE 流式输出
• 12.运行时配置 — runtimeConfig 与 .env
• 13.项目部署 — build / preview / 部署注意点
• 14.混合架构 — routeRules：SSR / CSR / 预渲染

版本 B：navigateTo / useRouter（编程式）

类似 Vue 的 () => router.push(路由)，适合按钮、登录后跳转、条件跳转。

• 1.课程介绍 — navigateTo('/')
• 2.项目搭建 — navigateTo('/demo/setup')
• 3.路由即页面 — navigateTo('/about')
• 4.布局系统 — navigateTo('/admin')
• 5.组件自动导入 — navigateTo('/demo/components')
• 6.生命周期 — navigateTo('/demo/lifecycle')
• 7.数据获取 — navigateTo('/demo/fetch')
• 8.状态管理 — navigateTo('/demo/state')
• 9.中间件 — navigateTo('/demo/middleware')
• 10.常用组件 — navigateTo('/demo/builtins')
• 11.服务端API — navigateTo('/demo/server-api')
• 12.运行时配置 — navigateTo('/demo/runtime')
• 13.项目部署 — navigateTo('/demo/deploy')
• 14.混合架构 — navigateTo('/demo/hybrid')

版本 C：按 name 跳转（GameStats）

等价 router.push({ name: 'GameStats' })， 页面在 pages/thrid-game-stats/index.vue。