Nuxt 3 已于 31 July 2026 结束生命周期
此版本将不再接收错误修复或安全补丁。 升级到 Nuxt 4 或获取 HeroDevs 提供的延长支持

<NuxtRouteAnnouncer>

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

Maschinelle Übersetzung ·0 % geprüft

此组件在 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）
该组件为可选。
若需完全自定义，可以基于其源代码自行实现。
你可以使用 useRouteAnnouncer 组合式函数钩入底层的播报器实例，从而设置自定义的播报消息。