面包屑

QBreadcrumbs（面包屑）组件在 UI 中用作导航辅助。帮助用户定位目前处于应用程序中的哪个页面。通常会用在QToolbar组件之中，但不局限于此。

用法

基础

设计

连接 Vue Router

以下示例在 UMD 版本中无法运行（因此在 Codepen/jsFiddle 中也不行），因为它们依赖 Vue Router。

您还可以延迟、取消或重定向导航，如下所示。关于下方示例中使用的 @click 事件的详细说明，请参阅页面顶部的 QBreadcrumbsEl API 卡片。

无障碍访问

v2.25+

QBreadcrumbs 仅渲染链接本身——自身不声明任何地标或列表语义。要遵循 WAI-ARIA 面包屑模式，请将组件包裹在 <nav aria-label="Breadcrumb"> 元素中，并为代表当前页面的 QBreadcrumbsEl 添加 aria-current="page"（属性会穿透到渲染的元素上）——组件本身不会自动完成这两项工作。

还需注意，分隔符文本会被屏幕阅读器在链接之间播报；如果希望避免这种情况，请通过 separator 插槽渲染带有 aria-hidden="true" 的内容。