<NuxtRouteAnnouncer> · Nuxt 组件

此组件在 Nuxt v3.12+ 中可用。

用法

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

app.vue

<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

插槽

您可以通过路由公告的默认插槽传递自定义 HTML 或组件。

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

属性

atomic：控制屏幕阅读器是否仅宣布更改或宣布整个内容。设置为 true 表示在更新时完整读取内容，设置为 false 表示仅读取更改。（默认值为 false）
politeness：设置屏幕阅读器公告的紧急程度：off（禁用公告）、polite（等待安静）或 assertive（立即打断）。（默认值为 polite）

此组件是可选的。
要实现完全自定义，您可以根据其源代码实现您自己的组件。

您可以使用 useRouteAnnouncer 组合式函数连接到底层的公告实例，这允许您设置自定义公告消息。

<Teleport> 组件将组件传送到 DOM 中的不同位置。

onPrehydrate

使用 onPrehydrate 在 Nuxt 水化页面之前立即在客户端运行回调。