<NuxtRouteAnnouncer>

<NuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素,以便向辅助技术宣布路由变化。
此组件在 Nuxt v3.12+ 版本中可用。

用法

在你的 app.vuelayouts/ 中添加 <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
该组件为可选。
若需完全自定义,可以基于其源代码自行实现。
你可以通过 useRouteAnnouncer 组合式函数访问底层播报实例,从而设置自定义播报信息。