摘要：“本文详细介绍了Nuxt 3中

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

date: 2024/7/7

updated: 2024/7/7

author: cmdragon

excerpt:

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

categories:

• 前端开发

tags:

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

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

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

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

一、组件的基本概念

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

二、组件的属性

1. name属性

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

2. route属性

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

3. pageKey属性

   • 类型：可以是字符串或函数

   • 作用：控制组件何时重新渲染。

   • 示例：

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

     <template>

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

     </template>

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

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

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

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

三、获取页面组件的引用

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

<template>

<NuxtPage ref="page" />code>

</template>

<script>

const page = ref()

function logFoo () {

page.value.pageRef.foo()

}

</script>

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

四、自定义属性

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

例如：

<NuxtPage :foobar="123" />code>

在模板中可以使用$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">code>

<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