面包屑导航需手动配置而非自动识别，Vue Router 4 中通过 meta.breadcrumb 设置字符串值并逐层定义，React Router v6 推荐 useMatches() 结合 handle.breadcrumb 获取层级，动态参数需异步查名称，SSR 注意执行时机，同一路由多入口需结合上下文硬编码处理。
面包屑导航不是靠自动识别路径生成的，它需要你明确告诉每个页面“我在哪一层、上一级是谁”，否则浏览器和框架根本不知道该显示什么。
用 useRouter + 手动配置路由元信息（Vue Router 4）
Vue Router 不会自动推导面包屑，得在 router.addRoute() 或路由定义里加 meta: {breadcrumb: '用户管理'}。嵌套路由要逐层写，不能只写叶子节点。
-
meta.breadcrumb值必须是字符串，不支持函数（除非你自己封装解析逻辑） - 带参数的路由如
/user/:id，meta.breadcrumb写死是没用的，得在组件内用useRoute().params.id拼接真实名称 - 如果用了
children，父级也要设meta.breadcrumb，否则中间层级会断掉
React Router v6 中用 useMatches 提取匹配路径
useMatches() 返回当前匹配的所有路由对象，按从根到叶子顺序排列，每个对象含 data?.breadcrumb 或 handle?.breadcrumb —— 这是你唯一能安全读取层级关系的地方。
- 别试图从
location.pathname字符串里切分路径，/admin/user/list 和 /admin/user/edit/123 层级语义完全不同 -
handle是推荐写法：{handle: { breadcrumb: '编辑用户'} }，比塞meta更符合 v6 设计意图 - 动态段（如
:id）的面包屑需在loader或组件内异步查名称，不能直接显示:id
纯前端静态面包屑容易漏掉「当前页无对应路由」的场景
比如搜索页 /search?q=vue、404 页面、或通过 router.push({name: 'xxx', query: {……} }) 跳转但没在路由表中声明的路径 —— 这些都不会出现在 useMatches() 或 router.currentRoute.value.matched 里。
- 遇到这种页面，得单独在组件内用
provide/inject或全局状态手动注入面包屑数组 - 不要依赖
window.location.pathname.split('/').filter(Boolean)自动生成，/api/v1 和 /user/profile 看似结构相似，语义完全无关 - 服务端渲染（SSR）时，
useMatches()在服务端可用，但useRoute()不行，注意执行时机
最麻烦的其实是「同一路由多个入口」：比如从首页点击进商品页、从分类页点击进同一商品页，面包屑的上一级应该不同。这时候光靠路由配置不够，得结合来源上下文或 history.state 传参处理 —— 这部分没有通用解法，得按业务逻辑硬编码。
