---
title: "useRouteAnnouncer"
description: "此 composable 会观察页面标题的变化，并相应地更新播报器消息。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-route-announcer"
---
# useRouteAnnouncer

> 此 composable 会观察页面标题的变化，并相应地更新播报器消息。

::important
此 composable 在 Nuxt v3.12+ 中可用。
::

## 描述

一个 composable，用于观察页面标题的变化，并相应地更新播报器消息。它由 [`<NuxtRouteAnnouncer>`](https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-route-announcer) 使用，并且可进行控制。它会接入 Unhead 的 `dom:rendered` 钩子，读取页面标题并将其设置为播报器消息。

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

## 参数

- `politeness`：设置屏幕阅读器播报的紧急程度：`off`（禁用播报）、`polite`（等待空闲）、或 `assertive`（立即打断）。（默认 `polite`）。

## 属性

### `message`

- **类型**: `Ref<string>`
- **描述**: 要播报的消息

### `politeness`

- **类型**: `Ref<string>`
- **描述**: 屏幕阅读器播报紧急级别 `off`、`polite` 或 `assertive`

## 方法

### `set(message, politeness = "polite")`

设置要播报的消息及其紧急级别。

### `polite(message)`

以 `politeness = "polite"` 设置消息。

### `assertive(message)`

以 `politeness = "assertive"` 设置消息。

## 示例

```vue [app/pages/index.vue]
<script setup lang="ts">
const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
  politeness: 'assertive',
})
</script>
```

::callout
对于播报页面内动态内容的变化（表单验证、toast、加载状态），请改用 [`useAnnouncer`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-announcer)。
::

---

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


## Sitemap

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