Nuxt 中的页面是带有特殊特性的 Vue 组件。它们可以包含数据、方法以及其他 Vue 特有的功能，使开发者能够创建动态的用户界面。此外，Nuxt 提供了服务器端渲染（SSR）能力，这意味着页面可以在发送到客户端之前在服务器上预先渲染，从而提升性能和搜索引擎优化（SEO）效果。

在课程项目中，我们为调查项目中的三类用户：访客、管理员和问卷填写者，设定了用户故事。每个用户故事代表一种独特的视角以及对应用户类别所需执行的一系列操作。通过这些用户故事，我们可以深入了解调查应用应具备的功能，以满足各类用户的特定需求。

此外，基于用户故事创建页面在优化网站搜索引擎排名方面起着重要作用。在内容创作过程中提供相关且高质量的内容，并遵循 SEO 最佳实践，有助于提高网站在搜索结果中的排名，吸引更多自然流量。

得益于先前定义的用户故事，我们现在清楚地了解了一个功能完整的调查应用应包含哪些核心页面。因此，我们可以确定必须实现的页面，以确保应用能够满足所有用户的不同需求。

访客页面

访客页面通常包含项目相关信息，供访问者查看。下表展示了支持访客用户故事所需的页面、页面文件名、路由路径及对应的布局：

问卷填写者页面

根据用户故事，问卷填写者需要以下页面：

• 导航至问卷表单的页面
• 问卷表单本身

下表列出了支持问卷填写者用户故事所生成的页面：

管理员页面

根据用户故事，管理员需要用于创建问卷、更新问卷以及查看问卷回答数据的页面。

下表列出了支持管理员用户故事所生成的页面：

错误页面

当用户访问未定义的路由路径或发生服务器错误时，将显示错误页面。Nuxt 默认提供一个具有 Nuxt 风格的错误页面，可通过在项目根目录添加 error.vue 文件来自定义该页面。

error.vue 文件包含一个视图组件，接收一个名为 error 的属性。在下面的代码中，模板中使用的 error 属性的必要字段已在 IError 接口中定义。需要注意的是，error 属性还包含一些未在接口中定义的其他属性，因为它们在模板中未被使用。

开发者可以利用错误状态码来为不同状态码（如 404、500 等）定制不同的错误视图。

1<template>
2  <NuxtLayout>
3    <v-container class="h-100 d-flex flex-column justify-center align-center">
4      <h1 class="text-center text-h2 w-75">{{ $props?.error?.statusCode }}</h1>
5      <h6 class="text-center text-h4 w-75 mt-5">
6        {{ $props?.error?.statusMessage }}
7      </h6>
8      <v-container class="w-50 mt-5">
9        <v-row justify="space-around">
10          <v-btn to="/admin">创建问卷</v-btn>
11          <v-btn to="/surveys">填写问卷</v-btn>
12        </v-row>
13      </v-container>
14    </v-container>
15  </NuxtLayout>
16</template>
17
18<script setup lang="ts">
19interface IError {
20  statusCode: string
21  statusMessage: string
22}
23interface IErrorProps {
24  error?: IError
25}
26defineProps<IErrorProps>()
27</script>

综合应用

现在我们已经深入理解了 Vue 页面与 Nuxt 路由机制，下方的组件将结合所学知识，用于构建调查项目的页面。

请仔细查看页面实现，并测试由用户故事生成的路由是否正常工作。

总结

本节课我们学习了为项目定义必要页面的重要性，以及如何创建错误页面以优雅处理应用程序错误（包括“404—页面未找到”错误）。我们还探讨了用户故事如何帮助识别应用所需的页面，这对实现有效的 SEO 至关重要。理解每类页面的作用并确保其针对搜索引擎进行优化，对于提升网站可见性、吸引更大量访问流量至关重要，这也为我们下一课的学习奠定了基础。