<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>
属性
atomic
: 控制屏幕阅读器是仅宣布更改还是整个内容。设置为 true 时在更新时读取完整内容,设置为 false 时仅读取更改。(默认false
)politeness
: 设置屏幕阅读器公告的紧急程度:off
(禁用公告),polite
(等待安静),或assertive
(立即打断)。(默认polite
)
此组件是可选的。:br 为了实现完全自定义,你可以基于其源代码实现自己的组件。
你可以使用 the useRouteAnnouncer
composable 钩入底层的公告实例,这允许你设置自定义的公告消息。
※此页面是 Nuxt.js 官方文档的非官方翻译页面。