<NuxtRouteAnnouncer> v3.12

源码
The <NuxtRouteAnnouncer> 组件会添加一个包含页面标题的隐藏元素，以便向辅助技术宣布路由变化。

Maschinelle Übersetzung ·0 % geprüft

此组件在 Nuxt v3.12+ 可用。
Weitere Informationen findest du unter Nuxt-Barrierefreiheit.

用法

在 app.vue 或 app/layouts/ 中添加 <NuxtRouteAnnouncer/>，通过向辅助技术告知页面标题变化来增强无障碍体验。这可以确保依赖屏幕阅读器的用户能够获知导航变化。

app/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 组合式函数接入底层通告器实例，从而设置自定义通告消息。
要通告页面内内容的变化（表单验证、提示通知、加载状态等），请改用 <NuxtAnnouncer> 组件和 useAnnouncer 组合式函数。