掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置

Amd794發表於2024-08-11
UX

title: 掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置
date: 2024/8/11
updated: 2024/8/11
author: cmdragon

excerpt:
摘要：本文詳細介紹Nuxt 3框架中definePageMeta的使用方法，包括如何為頁面元件定義後設資料，如佈局、過渡效果、路由中介軟體等。透過具體示例展示瞭如何設定各項後設資料屬性，以及如何利用definePageMeta定製頁面佈局和中介軟體邏輯，增強應用程式的路由管理和頁面控制能力。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 頁面後設資料
  • definePageMeta
  • 佈局
  • 中介軟體
  • 路由
  • 過渡效果

image
image

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

在使用 Nuxt 3 開發應用時，definePageMeta 是一個非常有用的功能。它允許你為你的頁面元件定義各種後設資料，這些後設資料會影響路由、佈局、中介軟體、過渡等多個方面。

1. 什麼是 definePageMeta？

definePageMeta 是 Nuxt 3 中用於為頁面元件定義後設資料的編譯器宏。透過使用 definePageMeta，你可以為每個靜態或動態路由配置自定義的頁面後設資料。這些後設資料可以包括佈局、過渡效果、路由中介軟體等。

2. definePageMeta 的基本用法

要在頁面元件中使用 definePageMeta，你需要在 <script setup> 中定義一個 definePageMeta 呼叫，並傳入一個包含頁面後設資料的物件。

示例程式碼

<template>
  <div>
    <h1>歡迎來到我的頁面</h1>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
</script>

在這個示例中，我們為 some-page.vue 頁面元件定義了一個佈局為 default 的後設資料。這意味著該頁面將使用 layouts/default.vue 檔案中定義的佈局。

3. definePageMeta 的屬性詳解

3.1 name

name 用於為頁面的路由定義一個名稱。預設情況下，名稱根據 pages/ 目錄中的路徑生成。

<script setup lang="ts">
definePageMeta({
  name: 'custom-page-name'
})
</script>

3.2 path

path 允許你定義一個複雜的路徑匹配器。如果需要比檔名更復雜的模式，可以使用此屬性。

<script setup lang="ts">
definePageMeta({
  path: '/custom/path/:id'
})
</script>

3.3 alias

alias 允許你定義額外的路徑，這些路徑將像記錄的副本一樣工作。

<script setup lang="ts">
definePageMeta({
  alias: ['/alias-path', '/another-alias']
})
</script>

3.4 keepalive

keepalive 用於控制元件的快取。當設定為 true 時，頁面狀態將被保留。你也可以提供 KeepAliveProps 來進行精細控制。

<script setup lang="ts">
definePageMeta({
  keepalive: true
})
</script>

3.5 key

key 用於更細粒度地控制 <NuxtPage> 元件的重新渲染。

<script setup lang="ts">
definePageMeta({
  key: (route) => route.fullPath
})
</script>

3.6 layout

layout 用於設定靜態或動態佈局的名稱。如果設定為 false，則禁用預設佈局。

<script setup lang="ts">
definePageMeta({
  layout: 'admin'
})
</script>

3.7 layoutTransition

layoutTransition 設定佈局過渡效果的名稱。設定為 false 可以禁用佈局過渡。

<script setup lang="ts">
definePageMeta({
  layoutTransition: {
    name: 'fade',
    mode: 'out-in'
  }
})
</script>

3.8 middleware

middleware 允許你定義中介軟體來處理路由邏輯。可以使用函式或字串形式的中介軟體。

<script setup lang="ts">
definePageMeta({
  middleware: [
    function (to, from) {
      const auth = useState('auth')

      if (!auth.value.authenticated) {
        return navigateTo('/login')
      }
    }
  ]
})
</script>

或者：

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

3.9 pageTransition

pageTransition 設定頁面過渡效果的名稱。設定為 false 可以禁用頁面過渡。

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'fade',
    mode: 'out-in'
  }
})
</script>

3.10 redirect

redirect 用於設定當直接匹配路由時的重定向目標。

<script setup lang="ts">
definePageMeta({
  redirect: '/home'
})
</script>

3.11 validate

validate 用於驗證當前路由是否有效。如果無效，可以返回 false 或者一個包含 statusCode 和 statusMessage 的物件。

<script setup lang="ts">
definePageMeta({
  validate: (route) => {
    return route.params.id ? true : { statusCode: 404, statusMessage: 'Not Found' }
  }
})
</script>

3.12 scrollToTop

scrollToTop 用於控制在渲染頁面之前是否滾動到頂部。

<script setup lang="ts">
definePageMeta({
  scrollToTop: true
})
</script>

4. 自定義屬性

除了上述屬性外，你還可以定義自定義後設資料：

<script setup lang="ts">
definePageMeta({
  pageType: 'Checkout'
})
</script>

定義佈局和中介軟體

1. 定義佈局

在 Nuxt 3 中，佈局控制頁面的外觀和結構。透過 definePageMeta，你可以為每個頁面指定一個佈局檔案。佈局檔案通常位於 layouts/ 目錄下。

示例程式碼：設定自定義佈局

<script setup lang="ts">
definePageMeta({
  // 設定頁面使用 'admin' 佈局
  layout: 'admin'
})
</script>

在上面的示例中，頁面將使用 layouts/admin.vue 檔案中定義的佈局。如果你有一個特定的佈局需求，可以在 layouts/ 目錄下建立相應的佈局檔案，並透過 layout 屬性指定。

示例程式碼：禁用預設佈局

<script setup lang="ts">
definePageMeta({
  // 禁用預設佈局
  layout: false
})
</script>

透過將 layout 屬性設定為 false，你可以禁用預設佈局。這在你需要完全控制頁面的佈局或不希望頁面應用任何佈局時非常有用。

2. 定義中介軟體

中介軟體是在路由切換之前或之後執行的一段程式碼，用於處理路由邏輯，例如許可權驗證或重定向。在 Nuxt 3 中，你可以透過 definePageMeta 直接定義中介軟體。

示例程式碼：使用函式定義中介軟體

<script setup lang="ts">
definePageMeta({
  middleware: [
    function (to, from) {
      const auth = useState('auth')

      if (!auth.value.authenticated) {
        return navigateTo('/login')
      }

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    }
  ]
})
</script>

在這個示例中，中介軟體函式檢查使用者的認證狀態。如果使用者未認證，則重定向到登入頁面。如果使用者路徑不是 /checkout，則重定向到結賬頁面。你可以根據實際需求在函式中新增更復雜的邏輯。

示例程式碼：使用中介軟體檔名

<script setup lang="ts">
definePageMeta({
  // 設定為中介軟體檔名（位於 middleware/ 目錄）
  middleware: 'auth'
})
</script>

透過將 middleware 屬性設定為字串，你可以指定一箇中介軟體檔名。此中介軟體檔案應放在 middleware/ 目錄中，並且應符合 Nuxt 的中介軟體約定。

示例程式碼：使用多箇中介軟體

<script setup lang="ts">
definePageMeta({
  // 設定多箇中介軟體
  middleware: ['auth', 'another-named-middleware']
})
</script>

你還可以透過陣列的形式指定多箇中介軟體，Nuxt 將依次執行這些中介軟體。

總結

透過 definePageMeta，你可以靈活地為 Nuxt 3 應用中的頁面配置佈局和中介軟體。無論是設定自定義佈局還是定義中介軟體，definePageMeta 都提供了強大的功能來滿足你的需求。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置 | cmdragon's Blog

往期文章歸檔：

  • 使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog
  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog

相關文章