Nuxt框架中内置组件详解及使用指南（二）

---

title: Nuxt框架中内置组件详解及使用指南（二）
date: 2024/7/7
updated: 2024/7/7
author: cmdragon

excerpt:
摘要：“本文详细介绍了Nuxt 3中<NuxtPage>和<NuxtLayout>组件的使用方法，包括组件的基本概念、属性、自定义属性、获取引用以及完整示例，展示了如何在Nuxt项目中有效利用这两个组件。

categories:

• 前端开发

tags:

• Nuxt3
• 组件
• Vue
• 前端
• 开发
• 教程
• 代码

---

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

Nuxt 3 中<NuxtPage>组件的使用指南与示例

<NuxtPage>组件用于显示位于pages/目录中的页面。

一、 组件的基本概念

组件是 Nuxt 内置的，它实际上是对 Vue Router 的 <RouterView> 组件的封装。这意味着它承担着根据路由规则来正确显示相应页面内容的重要职责。

二、 组件的属性

1. name 属性

   • 类型：字符串
   • 作用：告诉 RouterView 在匹配的路由记录的组件选项中使用对应名称渲染组件。
   • 示例：如果您有多个具有不同名称的页面组件，通过设置 name 属性可以准确指定要渲染的组件。

2. route 属性

   • 类型：RouteLocationNormalized
   • 作用：提供已解析的所有组件的路由位置信息。

3. pageKey 属性

   • 类型：可以是字符串或函数
   • 作用：控制 组件何时重新渲染。

   • 示例：

     • 传递 static 键， 组件在挂载时只会渲染一次。

     <template>
       <NuxtPage page-key="static" />
     </template>
     

     • 使用基于当前路由的动态键，如 route => route.fullPath 。

     <NuxtPage :page-key="route => route.fullPath" />
     

需要特别注意的是，在使用 pageKey 时，不要使用 $route 对象，因为这可能会在 与 一起渲染页面时引发问题。

此外，pageKey 还可以通过 pages 目录中的 Vue 组件的 definePageMeta 来传递。

三、获取页面组件的引用

要获取 组件的引用，可以通过以下方式：

<template>
  <NuxtPage ref="page" />
</template>

<script>
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

在上述代码中，我们定义了一个名为 page 的引用，并通过 page.value.pageRef 来访问页面组件的相关方法或属性。

四、自定义属性

组件还支持自定义属性，您可以根据需要向下传递这些属性。并且可以通过 Nuxt 应用的 attrs 来访问这些自定义属性。

例如：

<NuxtPage :foobar="123" />

在模板中可以使用 $attrs.foobar ，或者在脚本中使用 useAttrs().foobar 来获取其值。

完整示例：

步骤 1: 创建一个 Nuxt.js 项目

首先，你需要安装 Node.js 和 npm。然后，你可以使用以下命令创建一个新的 Nuxt.js 项目：

npx create-nuxt-app my-nuxt-project

按照提示完成安装和配置。

步骤 2: 创建一个页面组件

在 pages/ 目录下，创建一个新的页面组件，例如 about.vue：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

<style scoped>
/* 在这里添加页面样式 */
</style>

步骤 3: 在页面中使用 <NuxtPage> 组件

现在，我们可以在父组件中使用 <NuxtPage> 来渲染 about.vue 页面。在 pages/index.vue 中添加以下代码：

<template>
  <div>
    <h1>Welcome to Nuxt.js</h1>
    <NuxtPage />
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

<style scoped>
/* 在这里添加页面样式 */
</style>

在这个例子中，<NuxtPage> 会自动加载并渲染 about.vue 组件，因为 index.vue 是 Nuxt.js 的默认入口页面。

步骤 4: 运行项目并查看结果

在项目根目录下，运行以下命令来启动开发服务器：

npm run dev

打开浏览器并访问 http://localhost:3000，你应该能看到一个欢迎标题和一个由 <NuxtPage> 渲染的关于页面。

Nuxt 3 中<NuxtLayout>组件的使用指南与示例

Nuxt 提供了 <NuxtLayout> 组件来在页面和错误页面上显示布局。

基础用法

首先，让我们看看如何在 app.vue 或 error.vue 中使用 <NuxtLayout> 来激活默认布局。

app.vue 示例：

<template>
  <NuxtLayout>
    <!-- 页面内容放在这里 -->
    <div>这是页面内容</div>
  </NuxtLayout>
</template>

在上面的代码中，<NuxtLayout> 组件被用作包裹页面内容的容器。它会自动使用 layouts/default.vue 文件作为布局。

指定布局名称

如果你想要使用自定义的布局，可以通过 name 属性来指定布局名称。

pages/index.vue 示例：

<script setup>
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

在上面的代码中，我们通过一个响应式引用 layout 来指定布局名称为 custom，这会渲染 layouts/custom.vue 文件。

注意：  布局名称会被转换为 kebab-case，所以如果你的布局文件名为 errorLayout.vue，那么在传递给 <NuxtLayout> 时应该使用 error-layout。

传递附加 Props

过渡效果

获取布局组件的 Ref

完整示例

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：Nuxt框架中内置组件详解及使用指南（二） | cmdragon's Blog

往期文章归档：

• Nuxt框架中内置组件详解及使用指南（一） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（十一） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（十） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（九） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（八） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（七） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（六） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（五） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（四） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（三） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（二） | cmdragon's Blog
• Nuxt3 的生命周期和钩子函数（一） | cmdragon’s Blog
• 初学者必读：如何使用 Nuxt 中间件简化网站开发 | cmdragon's Blog