nuxt logo

文档翻译(非官方)

<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

此组件是可选的。:br 为了实现完全自定义,你可以基于其源代码实现自己的组件。

你可以使用 the useRouteAnnouncer composable 钩入底层的公告实例,这允许你设置自定义的公告消息。