<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

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