---
title: "<NuxtRouteAnnouncer>"
description: "<NuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，以便向辅助技术宣布路由变化。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/components/nuxt-route-announcer"
---
# \<NuxtRouteAnnouncer>

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

::important
此组件在 Nuxt v3.12+ 版本中可用。
::

## 用法

在 [`app.vue`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/app) 或 [`layouts/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/layouts) 中添加 `<NuxtRouteAnnouncer/>`，通过告知辅助技术页面标题的变化来提升可访问性。这样可以确保依赖屏幕阅读器的用户能够听到导航变化的播报。

```vue [app.vue]
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

## 插槽

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

```vue
<template>
  <NuxtRouteAnnouncer>
    <template #default="{ message }">
      <p>{{ message }} 已加载。</p>
    </template>
  </NuxtRouteAnnouncer>
</template>
```

## 属性

- `atomic`：控制屏幕阅读器是只播报变化内容还是全部内容。设置为 true 表示更新时朗读完整内容，false 表示仅朗读变化内容。（默认 `false`）
- `politeness`：设置屏幕阅读器播报的紧急程度：`off`（禁用播报）、`polite`（等待空闲时播报）、`assertive`（立即中断播报）。 （默认 `polite`）

::callout
该组件为可选。 :br
若需完全自定义，可以基于[其源代码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts)自行实现。
::

::callout
你可以使用 [`useRouteAnnouncer` 组合式函数](https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-route-announcer)钩入底层的播报器实例，从而设置自定义的播报消息。
::

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.