<NuxtRouteAnnouncer>

原始檔
<NuxtRouteAnnouncer> 元件添加了一個帶有頁面標題的隱藏元素，用於向輔助技術宣佈路由更改。
此元件在 Nuxt v3.12+ 中可用。

使用

在您的 app.vue 或 app/layouts/ 中新增 <NuxtRouteAnnouncer/>，以透過通知輔助技術頁面標題更改來增強可訪問性。這確保了依賴螢幕閱讀器的使用者能夠聽到導航更改的通知。

app/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 可組合函式 來連線底層播報器例項，這允許您設定自定義播報訊息。