v4 (4.0.0)
Nuxt on GitHub

<NuxtRouteAnnouncer>

源代码
<NuxtRouteAnnouncer> 组件添加一个隐藏元素，包含页面标题，以向辅助技术宣布路由变化。
此组件适用于 Nuxt v3.12+。

使用方法

在您的app.vue或layouts/中添加 <NuxtRouteAnnouncer/>，以通过向辅助技术通知页面标题变化来增强可访问性。这确保依赖屏幕阅读器的用户能够收到导航变化的播报。

app.vue
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

插槽

您可以通过路由播报器的默认插槽传递自定义 HTML 或组件。

  <template>
    <NuxtRouteAnnouncer>
      <template #default="{ message }">
        <p>{{ message }} 已加载。</p>
      </template>
    </NuxtRouteAnnouncer>
  </template>

属性

  • atomic：控制屏幕阅读器是仅宣布变化还是整个内容。设置为 true 时，更新时会完整读出内容；设置为 false 时，仅读出变化。（默认值：false）
  • politeness：设置屏幕阅读器播报的紧急程度：off（禁用播报）、polite（等待安静时播报）或 assertive（立即打断播报）。（默认值：polite）
此组件是可选的。:br 若需完全自定义，您可以根据其源代码实现自己的组件。
您可以使用useRouteAnnouncer 组合式 API挂钩底层的播报器实例，以设置自定义播报消息。