<NuxtRouteAnnouncer> · Компоненты Nuxt

Этот компонент доступен в Nuxt v3.12+.

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

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

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

Используйте onPrehydrate, чтобы запустить коллбэк-функцию на клиенте непосредственно перед тем, как Nuxt гидратирует страницу.