面包屑导航通过路由meta信息动态生成，核心是逐级收集matched中title存在且hideInBreadcrumb为false的路由项，按顺序渲染并处理动态路径与国际化。
面包屑导航可以通过路由元信息（meta）配合嵌套路由结构动态生成，核心在于逐级收集父级和当前路由的 meta.title 或类似字段，并按层级顺序渲染。
一、定义路由时统一配置 meta 信息
在 Vue Router（v4/v5）或 React Router（v6+）中，为每个路由（尤其是嵌套路由）设置清晰、可继承的 meta 字段。推荐使用 title 表示显示文本，hideInBreadcrumb 控制是否参与面包屑（如登录页、404 页）。
- Vue Router 示例（router/index.js）：
{
path: '/user',
name: 'UserLayout',
component: () => import('@/layouts/UserLayout.vue'),
meta: { title: '用户中心' },
children: [
{
path: 'profile',
name: 'UserProfile',
component: () => import('@/views/user/Profile.vue'),
meta: { title: '个人资料' }
},
{
path: 'settings',
name: 'UserSettings',
component: () => import('@/views/user/Settings.vue'),
meta: { title: '系统设置', hideInBreadcrumb: true }
}
]
}注意：UserLayout 路由本身不直接对应页面，但它的 meta.title 是面包屑首项；UserSettings 设置 hideInBreadcrumb: true 后将被跳过。
二、封装通用面包屑组件（以 Vue 3 + Composition API 为例）
组件通过 useRoute() 获取当前路由，再递归向上遍历 matched 数组，筛选出应展示的路由项。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 只取
meta.title存在且hideInBreadcrumb !== true的路由 - 确保顺序为从根到当前（
route.matched天然有序） - 为每项生成可点击链接（
<routerlink></routerlink>），非最后一项加「/」分隔符
<template>
<div class="breadcrumb">
<RouterLink to="/" class="item">首页</RouterLink>
<span v-for="(item, i) in breadcrumbItems" :key="item.path">
<span class="separator">/</span>
<RouterLink
v-if="i < breadcrumbItems.length - 1"
:to="item.path"
class="item"
>{{ item.meta.title }}</RouterLink>
<span v-else class="item current">{{ item.meta.title }}</span>
</span>
</div>
</template>
<p><script setup>
import { useRoute } from 'vue-router'</p><p>const route = useRoute()
const breadcrumbItems = route.matched.filter(
r => r.meta.title && r.meta.hideInBreadcrumb !== true
)
</script>三、处理动态路由与参数化路径（如 /post/:id）
当路由含动态段（:id）时，item.path 是原始带参数的路径（如 /post/:id），不能直接用作链接。需结合 route.params 动态拼接真实路径。
- 对每个匹配项，用
router.resolve({ name: item.name, params: route.params }).path生成有效链接 - 若路由未命名（无
name），可用item.path.replace(/:\w+/g, route.params[...])简单替换（仅限简单场景） - 建议所有需要面包屑的路由都显式声明
name，便于精准解析
四、增强体验：支持国际化与自定义文案
若项目支持多语言，meta.title 可设为 i18n key（如 meta: { title: 'user.profile' }），在面包屑组件中调用 t(meta.title) 渲染。
- 也可允许在
meta中直接传函数：title: () => t('user.profile') + `（${route.params.id}）` - 对特殊页面（如「新建文章」），可在路由定义时写死
meta.title: '新建文章'，无需依赖参数
不复杂但容易忽略的是：始终校验 meta.title 是否存在，避免空文本；嵌套路由层级过深时，可通过 meta.breadcrumbDepth 限制显示深度（如最多显示 3 级）。
