深入理解 Nuxt 生命周期：从服务器到客户端的全流程解析

1
import { defineEventHandler, getCookie, createError } from 'h3'
2
import { verify } from 'jsonwebtoken'
3

4
export default defineEventHandler(async (event) => {
5
  // 从Cookie里拿令牌
6
  const token = getCookie(event, 'auth_token')
7
  if (!token) {
8
    throw createError({
9
      statusCode: 401,
10
      statusMessage: '😱 未登录，请先登录！',
11
    })
12
  }
13

14
  try {
15
    // 验证令牌（密钥从环境变量拿，别硬写！）
16
    const payload = verify(token, process.env.JWT_SECRET!)
17
    // 把用户信息存到请求上下文，后面的API直接用
18
    event.context.user = payload
19
  } catch (err) {
20
    throw createError({
21
      statusCode: 401,
22
      statusMessage: '🔑 令牌无效，请重新登录！',
23
    })
24
  }
25
})

1
<template>
2
  <div v-if="article">
3
    <h1>{{ article.title }}</h1>
4
    <p>{{ article.content }}</p>
5
  </div>
6
  <div v-else>😢 文章不存在！</div>
7
</template>
8

9
<script setup lang="ts">
10
import { PrismaClient } from '@prisma/client'
11
const prisma = new PrismaClient()
12

13
// 定义页面元数据：路由验证逻辑
14
definePageMeta({
15
  validate: async (route) => {
16
    // 把参数转成数字（防止字符串注入）
17
    const id = Number(route.params.id)
18
    if (isNaN(id)) {
19
      // 参数无效，返回400错误
20
      return { statusCode: 400, statusMessage: '❌ 无效的文章ID！' }
21
    }
22

23
    // 查数据库，看文章是不是真的存在
24
    const article = await prisma.article.findUnique({ where: { id } })
25
    if (!article) {
26
      // 文章不存在，返回404错误
27
      return { statusCode: 404, statusMessage: '❌ 文章没找到！' }
28
    }
29

30
    // 验证通过，继续导航
31
    return true
32
  },
33
})
34

35
// 获取文章数据（SSR期间执行，客户端不重复请求）
36
const route = useRoute()
37
const { data: article } = await useAsyncData('article', async () => {
38
  return prisma.article.findUnique({ where: { id: Number(route.params.id) } })
39
})
40
</script>

1
import { defineNuxtRouteMiddleware, navigateTo } from '#app'
2

3
export default defineNuxtRouteMiddleware((to) => {
4
  // 从Pinia里拿用户信息（假设你用Pinia存状态）
5
  const user = useUserStore().user
6

7
  // 检查是不是管理员页面，且用户不是管理员
8
  if (to.path.startsWith('/admin') && !user?.isAdmin) {
9
    // 重定向到登录页
10
    return navigateTo('/login')
11
  }
12
})

1
<template>
2
  <div class="article-list">
3
    <div
4
      v-for="article in articles"
5
      :key="article.id"
6
      class="article-item"
7
    >
8
      <h2>{{ article.title }}</h2>
9
      <p>{{ article.excerpt }}</p>
10
    </div>
11
  </div>
12
</template>
13

14
<script setup lang="ts">
15
import { PrismaClient } from '@prisma/client'
16
const prisma = new PrismaClient()
17

18
// 服务器端获取文章列表（只查需要的字段，优化性能！）
19
const { data: articles } = await useAsyncData('articles', async () => {
20
  return prisma.article.findMany({
21
    select: { id: true, title: true, excerpt: true }, // 只拿ID、标题、摘要
22
    orderBy: { createdAt: 'desc' }, // 按创建时间倒序
23
  })
24
})
25
</script>

1
import { defineNitroPlugin } from 'nitropack'
2

3
export default defineNitroPlugin((nitroApp) => {
4
  nitroApp.hooks.hook('render:html', (htmlContext) => {
5
    // 在</body>前注入GA脚本（不用改页面代码！）
6
    htmlContext.bodyAppend.push(`
7
      <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
8
      <script>
9
        window.dataLayer = window.dataLayer || [];
10
        function gtag(){dataLayer.push(arguments);}
11
        gtag('js', new Date());
12
        gtag('config', 'G-XXXXXXX');
13
      </script>
14
    `)
15
  })
16
})

1
import { defineNuxtPlugin } from '#app'
2

3
export default defineNuxtPlugin((nuxtApp) => {
4
  // Nuxt客户端应用创建完成时触发
5
  nuxtApp.hooks.hook('app:created', () => {
6
    // 计算从页面开始加载到应用创建的时间
7
    const loadTime =
8
      performance.now() - window.performance.timing.navigationStart
9
    console.log(`⏱️ 客户端应用加载时间：${loadTime.toFixed(2)}ms`)
10
  })
11
})

1
import { defineNuxtRouteMiddleware, navigateTo } from '#app'
2

3
export default defineNuxtRouteMiddleware((to) => {
4
  // 从Pinia拿用户信息
5
  const user = useUserStore().user
6

7
  // 检查是不是个人中心页面，且用户没登录
8
  if (to.path.startsWith('/profile') && !user) {
9
    // 重定向到登录页
10
    return navigateTo('/login')
11
  }
12
})

1
<script setup lang="ts">
2
const route = useRoute()
3
// 服务器和客户端都执行这个逻辑，数据一致！
4
const { data: article } = await useAsyncData('article', async () => {
5
  return $fetch(`/api/articles/${route.params.id}`)
6
})
7
</script>

1
<template>
2
  <div id="chart" style="width: 100%; height: 300px;" />
3
</template>
4

5
<script setup lang="ts">
6
import * as echarts from 'echarts'
7

8
onMounted(() => {
9
  // 只有浏览器有DOM，才能拿到图表容器（服务器端没有这一步！）
10
  const chartDom = document.getElementById('chart')
11
  if (!chartDom) return // 防止容器不存在导致报错
12

13
  const myChart = echarts.init(chartDom)
14

15
  // 模拟阅读量数据（实际项目中从API获取，比如`/api/articles/${route.params.id}/views`）
16
  const option = {
17
    title: { text: '文章阅读量趋势' },
18
    xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
19
    yAxis: { type: 'value' },
20
    series: [
21
      {
22
        type: 'line',
23
        data: [120, 200, 150, 80, 70],
24
        smooth: true, // 让折线更丝滑～
25
      },
26
    ],
27
  }
28

29
  myChart.setOption(option)
30

31
  // 窗口resize时，图表自适应（贴心小细节！）
32
  window.addEventListener('resize', () => {
33
    myChart.resize()
34
  })
35
})
36
</script>