v3.16
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）
此组件是可选的。
要实现完整的自定义，你可以基于 它的源代码 实现你自己的组件。
你可以使用 the useRouteAnnouncer composable 钩入底层公告实例，这允许你设置自定义公告消息。