Nuxt.js 多页面应用-JavaScript中文网-JavaScript教程资源分享门户

在本章中，我们将深入了解如何使用 Nuxt.js 创建多页面应用。多页面应用通常用于需要多个独立页面的项目，例如博客、企业网站等。Nuxt.js 提供了一种非常简单的方式来创建和管理这些页面。

目录结构

首先，让我们看看一个典型的 Nuxt.js 项目的目录结构，特别是在处理多页面应用时：

// www.javascriptcn.com code example
-| nuxt-app/
  -| assets/
  -| components/
  -| layouts/
  -| middleware/
  -| pages/
    -| about.vue
    -| blog/
      -| index.vue
      -| post-1.vue
      -| post-2.vue
    -| contact.vue
    -| index.vue
  -| plugins/
  -| static/
  -| store/
  -| nuxt.config.js
  -| package.json

在这个结构中，pages 目录是最重要的部分。每个 .vue 文件都代表一个单独的页面，并且会自动生成对应的路由。

创建基本页面

创建首页

默认情况下，Nuxt.js 将 pages/index.vue 视为首页。你可以直接在该文件中编写你的主页内容：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <p>这是首页。</p>
  </div>
</template>

<script>
export default {
  head: {
    title: '首页',
    meta: [
      { hid: 'description', name: 'description', content: '这是我的网站的首页' }
    ]
  }
}
</script>

创建其他页面

为了添加更多页面，只需在 pages 目录下创建新的 .vue 文件即可。例如，如果你想创建一个关于页面，可以创建 pages/about.vue 文件：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是我们的公司介绍。</p>
  </div>
</template>

<script>
export default {
  head: {
    title: '关于我们',
    meta: [
      { hid: 'description', name: 'description', content: '这是我们公司的介绍页面' }
    ]
  }
}
</script>

使用嵌套路由

Nuxt.js 支持嵌套路由，这意味着你可以在一个页面内嵌套其他页面。这对于创建具有层次结构的应用非常有用。例如，我们可以在 pages/blog 目录下创建多个博客文章页面。

创建博客页面

在 pages 目录下创建 blog 子目录，并在其中创建 index.vue 和 post-1.vue 文件：

// www.javascriptcn.com code example
<!-- pages/blog/index.vue -->
<template>
  <div>
    <h1>博客首页</h1>
    <ul>
      <li><nuxt-link to="/blog/post-1">文章一</nuxt-link></li>
      <li><nuxt-link to="/blog/post-2">文章二</nuxt-link></li>
    </ul>
  </div>
</template>

// www.javascriptcn.com code example
<!-- pages/blog/post-1.vue -->
<template>
  <div>
    <h1>文章一</h1>
    <p>这是第一篇文章的内容。</p>
  </div>
</template>

<script>
export default {
  head: {
    title: '文章一',
    meta: [
      { hid: 'description', name: 'description', content: '这是第一篇文章的内容' }
    ]
  }
}
</script>

使用布局

布局文件允许你在多个页面之间共享相同的 HTML 结构。Nuxt.js 默认提供了一个 default 布局，位于 layouts/default.vue。你可以根据需要创建更多的布局文件。

创建自定义布局

假设我们需要为所有博客页面创建一个不同的布局，可以在 layouts 目录下创建一个新的布局文件：

// www.javascriptcn.com code example
<!-- layouts/blog.vue -->
<template>
  <div>
    <header>
      <h1>博客</h1>
    </header>
    <main>
      <nuxt />
    </main>
    <footer>
      <p>&copy; 2023 博客</p>
    </footer>
  </div>
</template>

然后，在 pages/blog 目录下的页面中指定这个布局：

// www.javascriptcn.com code example
<!-- pages/blog/index.vue -->
<template>
  <div>
    <h1>博客首页</h1>
    <ul>
      <li><nuxt-link to="/blog/post-1">文章一</nuxt-link></li>
      <li><nuxt-link to="/blog/post-2">文章二</nuxt-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  layout: 'blog'
}
</script>

动态路由

动态路由允许你在 URL 中使用参数来动态生成页面内容。这可以通过在 pages 目录下创建带有参数的文件来实现。

示例：动态博客文章

假设我们有一个博客系统，其中每篇文章都有一个唯一的 ID。我们可以使用动态路由来处理这种情况：

// www.javascriptcn.com code example
<!-- pages/blog/_id.vue -->
<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const id = params.id;
    // 这里可以调用 API 来获取文章内容
    const article = await fetch(`https://api.example.com/articles/${id}`).then(res => res.json());
    return { article };
  }
}
</script>

在上面的例子中，_id.vue 文件将匹配任何以 /blog/ 开头并跟随一个 ID 的 URL。Nuxt.js 会自动将该 ID 作为 params.id 提供给组件。

结论

通过以上步骤，你已经学会了如何使用 Nuxt.js 创建和管理多页面应用。从简单的首页到复杂的嵌套路由和动态路由，Nuxt.js 都提供了强大的功能来帮助你构建现代 Web 应用程序。希望本章对你有所帮助！接下来，我们将在下一章探讨如何优化和部署 Nuxt.js 应用程序。