<NuxtRouteAnnouncer>

Исходный код
Компонент <NuxtRouteAnnouncer> добавляет скрытый элемент с заголовком страницы, чтобы сообщать об изменениях маршрута вспомогательным технологиям.
Этот компонент доступен в Nuxt v3.12+.

Использование

Добавьте <NuxtRouteAnnouncer/> в ваш app.vue или layouts/, чтобы повысить доступность, информируя вспомогательные технологии об изменении заголовка страницы. Это гарантирует, что пользователи, пользующиеся средствами чтения с экрана, будут уведомлены об изменениях в навигации.

app.vue
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Слоты

Вы можете передавать пользовательский HTML или компоненты через слот по умолчанию компонента анонсировщика маршрута.

<template>
  <NuxtRouteAnnouncer>
    <template #default="{ message }">
      <p>Страница загружена: {{ message }}.</p>
    </template>
  </NuxtRouteAnnouncer>
</template>

Входные параметры

  • atomic: Определяет, будут ли программы чтения с экрана только сообщать об изменениях или обо всем содержимом. Установите значение true для полного содержимого, считываемого при обновлениях, и значение false только для считываний изменений. (по умолчанию false)
  • politeness: Устанавливает срочность для объявлений программы чтения с экрана: off (отключение объявления), polite (ожидает тишины), или assertive (немедленное прерывание). (по умолчанию polite)
Этот компонент является необязательным.
Чтобы полностью настроить поведение под свои задачи, вы можете реализовать свой анонсер на основе исходного кода этого компонента.
К базовому экземпляру анонсера можно обратиться через композабл useRouteAnnouncer и задать своё текстовое объявление.