<NuxtRouteAnnouncer> · Nuxt 組件

此元件在 Nuxt v3.12+ 版本中可用。

用法

在您的 app.vue 或 layouts/ 中新增 <NuxtRouteAnnouncer/>，以增強可訪問性，方法是通知輔助技術關於頁面標題的變更。這確保了導航變更會宣告給依賴螢幕閱讀器的使用者。

app.vue

<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

插槽

您可以透過路由宣告器的預設插槽傳遞自訂 HTML 或元件。

  <template>
    <NuxtRouteAnnouncer>
      <template #default="{ message }">
        <p>{{ message }} was loaded.</p>
      </template>
    </NuxtRouteAnnouncer>
  </template>

屬性

atomic：控制螢幕閱讀器僅宣告變更還是宣告完整內容。設定為 true 以在更新時完整讀取內容，設定為 false 則僅讀取變更。（預設值為 false）
politeness：設定螢幕閱讀器宣告的緊急程度：off（停用宣告）、polite（等待靜默）或 assertive（立即中斷）。（預設值為 polite）

此元件為選用項目。
為了實現完全自訂，您可以根據其原始碼實作您自己的元件。

您可以使用 useRouteAnnouncer composable 連結到基礎宣告器實例，這可讓您設定自訂宣告訊息。

<Teleport> 元件將元件傳送到 DOM 中的不同位置。

onPrehydrate

使用 onPrehydrate 在用戶端立即執行回呼，在 Nuxt hydration 頁面之前。