<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 组合式函数挂载到底层的播报器实例，从而允许您设置自定义播报消息。
如果要播报页面内的内容更改（表单验证、toast 通知、加载状态等），请改用带有 useAnnouncer 组合式函数的 <NuxtAnnouncer> 组件。