UBreadcrumb：从菜单或路由生成当前位置

UPage 已内置 UBreadcrumb。只有在自定义页面布局或需要独立放置时，才直接使用它。组件依赖已安装的 Vue Router。

显式面包屑

下面是独立页面示例。路径需对应应用已注册的路由；最后一项只显示文字，即使提供了 path 也不会成为链接。

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { UBreadcrumb, type Crumb } from '@uadmin/ui'

const { t } = useI18n({
  useScope: 'local',
  messages: {
    'zh-CN': { home: '首页', users: '用户', detail: '用户详情' },
    'en-US': { home: 'Home', users: 'Users', detail: 'User details' },
  },
})
const items = computed<Crumb[]>(() => [
  { title: t('users'), path: '/users' },
  { title: t('detail') },
])
</script>

<template>
  <UBreadcrumb :items="items" :home-title="t('home')" home-path="/dashboard" />
</template>

自动推导顺序

1. 非空 items。
2. 注入的 PermissionMenuInjectKey.findCrumbs(route.path)，即菜单反查结果。
3. 没有菜单命中（返回 null）时，使用 route.matched 中带 meta.title 的记录。

路由记录设置 meta.hiddenBreadcrumb=true 可从第三种来源排除；根路径 / 也会被排除。标题先作为全局语言键查询，找不到时显示原文本。局部语言包的键应先调用 t，如上例。

使用 createUAdmin 时菜单 provider 由内核装配。独立应用可以在根组件提供：

import { provide, ref } from 'vue'
import { BreadcrumbVisibleInjectKey, PermissionMenuInjectKey } from '@uadmin/ui'

provide(BreadcrumbVisibleInjectKey, ref(true))
provide(PermissionMenuInjectKey, {
  findCrumbs(path) {
    return path === '/users' ? [{ title: 'menu.users', path: '/users' }] : null
  },
})

menu.users 需要在应用全局语言包注册。provider 返回空数组表示“已找到但没有层级”，不会继续回退到路由。

API

Prop	类型	默认 / 行为
items	{ title: string; path?: string }[]	非空时覆盖自动来源
homeTitle	string	内置首页语言键，缺失时回退“首页”
homePath	string	'/dashboard'
showHome	boolean	true；首项路径已为 homePath 时不重复添加

没有自定义 slots、events 或实例方法。BreadcrumbVisibleInjectKey 的 ref 为 false 时，整个导航不渲染，包括显式 items。

常见误用

• items=[] 不会关闭导航，而是启用自动推导；在 UPage 上用 :breadcrumb="false"，独立布局通过全局可见性注入控制。
• 不要把包含参数的路由模板 /users/:id 当作可点击父级路径；需要实际链接时提供显式 items。
• 不要在 UPage 正文再放第二个 UBreadcrumb，否则会显示两组。

相关：UPage · 组件选型