<NuxtRouteAnnouncer>

<NuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。

该组件在 Nuxt v3.12+ 中可用。 :

用法

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

app/app.vue

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

Slots

你可以通过 route announcer 的默认插槽传入自定义 HTML 或组件。

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

Props

atomic：控制屏幕阅读器是仅播报变化还是播报整个内容。设为 true 以在更新时完整读出内容，false 则仅播报变化。（默认值 false）
politeness：设置屏幕阅读器播报的紧急程度：off（禁用播报）、polite（等待静默后播报）、或 assertive（立即打断播报）。（默认值 polite）

该组件是可选的。:br 要实现完全自定义，你可以基于其源码实现你自己的版本。 :

你可以使用 the useRouteAnnouncer 组合式函数钩入底层的 announcer 实例，它允许你设置自定义的播报消息。 :

对于页内内容变化（表单校验、toast 通知、加载状态等）的播报，请改用 <NuxtAnnouncer> 组件配合 useAnnouncer 组合式函数。 :