Nuxt框架中內建元件詳解及使用指南（二）

Amd794發表於2024-07-07
UX框架元件

title: Nuxt框架中內建元件詳解及使用指南（二）
date: 2024/7/7
updated: 2024/7/7
author: cmdragon

excerpt:
摘要：“本文詳細介紹了Nuxt 3中和元件的使用方法，包括元件的基本概念、屬性、自定義屬性、獲取引用以及完整示例，展示瞭如何在Nuxt專案中有效利用這兩個元件。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 元件
  • Vue
  • 前端
  • 開發
  • 教程
  • 程式碼

image

image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

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

相關文章