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

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

<important>

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

</important>

<read-more title="Nuxt accessibility" to="https://nuxt.zhcndoc.com/docs/4.x/guide/best-practices/accessibility#route-announcements">



</read-more>

## 用法

在 [`app.vue`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/app) 或 [`app/layouts/`](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/layouts) 中添加 `<NuxtRouteAnnouncer/>`，通过向辅助技术告知页面标题变化来增强无障碍体验。这可以确保依赖屏幕阅读器的用户能够获知导航变化。

```vue [app/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 />

<br />


要实现完全自定义，你可以基于 [其源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts) 自行实现一个。

</callout>

<callout>

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

</callout>

<callout>

要通告页面内内容的变化（表单验证、提示通知、加载状态等），请改用 [`<NuxtAnnouncer>`](https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-announcer) 组件和 [`useAnnouncer`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-announcer) 组合式函数。

</callout>

---

- [源码](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.