<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

在 Nuxt 页面预填充之前，使用 onPrehydrate 在客户端立即运行回调。