在本章中，我们将深入了解如何使用 Nuxt.js 创建多页面应用。多页面应用通常用于需要多个独立页面的项目，例如博客、企业网站等。Nuxt.js 提供了一种非常简单的方式来创建和管理这些页面。
目录结构
首先，让我们看看一个典型的 Nuxt.js 项目的目录结构，特别是在处理多页面应用时：
-- -------------------- ---- -------
-- ---------
-- -------
-- -----------
-- --------
-- -----------
-- ------
-- ---------
-- -----
-- ---------
-- ----------
-- ----------
-- -----------
-- ---------
-- --------
-- -------
-- ------
-- --------------
-- ------------在这个结构中，pages 目录是最重要的部分。每个 .vue 文件都代表一个单独的页面，并且会自动生成对应的路由。
创建基本页面
创建首页
默认情况下，Nuxt.js 将 pages/index.vue 视为首页。你可以直接在该文件中编写你的主页内容：
-- -------------------- ---- -------
----------
-----
-----------------
------------
------
-----------
--------
------ ------- -
----- -
------ -----
----- -
- ---- -------------- ----- -------------- -------- ----------- -
-
-
-
---------创建其他页面
为了添加更多页面，只需在 pages 目录下创建新的 .vue 文件即可。例如，如果你想创建一个关于页面，可以创建 pages/about.vue 文件：
-- -------------------- ---- -------
----------
-----
-------------
-----------------
------
-----------
--------
------ ------- -
----- -
------ -------
----- -
- ---- -------------- ----- -------------- -------- ------------- -
-
-
-
---------使用嵌套路由
Nuxt.js 支持嵌套路由，这意味着你可以在一个页面内嵌套其他页面。这对于创建具有层次结构的应用非常有用。例如，我们可以在 pages/blog 目录下创建多个博客文章页面。
创建博客页面
在 pages 目录下创建 blog 子目录，并在其中创建 index.vue 和 post-1.vue 文件：
-- -------------------- ---- -------
---- -------------------- ---
----------
-----
-------------
----
-------------- --------------------------------------
-------------- --------------------------------------
-----
------
------------- -------------------- ---- -------
---- --------------------- ---
----------
-----
------------
------------------
------
-----------
--------
------ ------- -
----- -
------ ------
----- -
- ---- -------------- ----- -------------- -------- ------------ -
-
-
-
---------使用布局
布局文件允许你在多个页面之间共享相同的 HTML 结构。Nuxt.js 默认提供了一个 default 布局，位于 layouts/default.vue。你可以根据需要创建更多的布局文件。
创建自定义布局
假设我们需要为所有博客页面创建一个不同的布局，可以在 layouts 目录下创建一个新的布局文件：
-- -------------------- ---- -------
---- ---------------- ---
----------
-----
--------
-----------
---------
------
----- --
-------
--------
--------- ---- ------
---------
------
-----------然后，在 pages/blog 目录下的页面中指定这个布局：
-- -------------------- ---- -------
---- -------------------- ---
----------
-----
-------------
----
-------------- --------------------------------------
-------------- --------------------------------------
-----
------
-----------
--------
------ ------- -
------- ------
-
---------动态路由
动态路由允许你在 URL 中使用参数来动态生成页面内容。这可以通过在 pages 目录下创建带有参数的文件来实现。
示例：动态博客文章
假设我们有一个博客系统，其中每篇文章都有一个唯一的 ID。我们可以使用动态路由来处理这种情况：
-- -------------------- ---- -------
---- ------------------ ---
----------
-----
------ ------------- -------
----- --------------- ------
------
-----------
--------
------ ------- -
----- ----------- ------ -- -
----- -- - ----------
-- ------ --- -------
----- ------- - ----- -------------------------------------------------------- -- ------------
------ - ------- --
-
-
---------在上面的例子中，_id.vue 文件将匹配任何以 /blog/ 开头并跟随一个 ID 的 URL。Nuxt.js 会自动将该 ID 作为 params.id 提供给组件。
结论
通过以上步骤，你已经学会了如何使用 Nuxt.js 创建和管理多页面应用。从简单的首页到复杂的嵌套路由和动态路由，Nuxt.js 都提供了强大的功能来帮助你构建现代 Web 应用程序。希望本章对你有所帮助！接下来，我们将在下一章探讨如何优化和部署 Nuxt.js 应用程序。