<NuxtRouteAnnouncer>
<NuxtRouteAnnouncer> 컴포넌트는 페이지 제목이 포함된 숨겨진 요소를 추가하여 보조 기술에 라우트 변경을 알립니다.
이 컴포넌트는 Nuxt v3.12+에서 사용할 수 있습니다.
사용법
app.vue 또는 layouts/에 <NuxtRouteAnnouncer/>를 추가하여 페이지 제목 변경을 보조 기술에 알림으로써 접근성을 향상시킬 수 있습니다. 이를 통해 화면 읽기 프로그램을 사용하는 사용자에게 내비게이션 변경 사항이 안내됩니다.
app.vue
<template>
<NuxtRouteAnnouncer />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
슬롯
라우트 어나운서의 기본 슬롯을 통해 사용자 정의 HTML 또는 컴포넌트를 전달할 수 있습니다.
<template>
<NuxtRouteAnnouncer>
<template #default="{ message }">
<p>{{ message }}가 로드되었습니다.</p>
</template>
</NuxtRouteAnnouncer>
</template>
Props
atomic: 화면 읽기 프로그램이 변경 사항만 알릴지 전체 내용을 알릴지 제어합니다. 업데이트 시 전체 내용을 읽으려면 true로, 변경 사항만 읽으려면 false로 설정합니다. (기본값false)politeness: 화면 읽기 프로그램 알림의 긴급도를 설정합니다:off(알림 비활성화),polite(조용해질 때까지 대기), 또는assertive(즉시 중단하고 알림). (기본값polite)
이 컴포넌트는 선택 사항입니다.
완전한 커스터마이징을 원한다면 소스 코드를 참고하여 직접 구현할 수 있습니다.
완전한 커스터마이징을 원한다면 소스 코드를 참고하여 직접 구현할 수 있습니다.
useRouteAnnouncer 컴포저블을 사용하여 내부 어나운서 인스턴스에 연결할 수 있으며, 이를 통해 사용자 정의 알림 메시지를 설정할 수 있습니다.