v3.17

<NuxtRouteAnnouncer>

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

用法

¥Usage

在你的 app.vue 或 layouts/ 中添加 <NuxtRouteAnnouncer/>，以便通过向辅助技术通知页面标题更改来增强可访问性。这确保了导航更改会通知给依赖屏幕阅读器的用户。

¥Add <NuxtRouteAnnouncer/> in your app.vue or layouts/ to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.

app.vue
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

插槽

¥Slots

你可以通过路由播报器的默认插槽传递自定义 HTML 或组件。

¥You can pass custom HTML or components through the route announcer's default slot.

  <template>
    <NuxtRouteAnnouncer>
      <template #default="{ message }">
        <p>{{ message }} was loaded.</p>
      </template>
    </NuxtRouteAnnouncer>
  </template>

Props

  • atomic：控制屏幕阅读器是仅播报更改还是播报全部内容。设置为 true 表示在更新时读取完整内容，设置为 false 表示仅读取更改内容。(默认 false)
  • politeness：设置屏幕阅读器公告的紧急程度：off（禁用通知）、polite（等待静音）或 assertive（立即中断）。(默认 polite)
此组件是可选的。:br 要实现完全自定义，你可以基于 其源代码 实现自己的自定义。¥This component is optional.
To achieve full customization, you can implement your own one based on its source code.
你可以使用 useRouteAnnouncer 可组合组件 钩住底层播音员实例，这允许你设置自定义播音消息。¥You can hook into the underlying announcer instance using the useRouteAnnouncer composable, which allows you to set a custom announcement message.