Vue 动态路由如何结合面包屑导航实现动态路由层级的联动展示

动态路由面包屑需基于$route.matched提取meta.title，过滤breadcrumb为false及重定向项，动态参数页应异步获取真实标题，点击前用router.resolve校验路径有效性，嵌套路由须逐级配置独立meta.title。

动态路由结合面包屑导航，关键在于利用 $route.matched 提取当前完整匹配路径中的所有路由记录，并从中按顺序读取每层的 meta.title，同时确保动态参数（如 /user/:id）的标题能被正确解析和展示。

路由配置必须携带 meta.title 和 breadcrumb 控制标识

每个动态路由项都要在 meta 中声明可读标题和是否参与面包屑渲染：

1. 必填字段：meta: { title: '用户详情', breadcrumb: true }
2. 禁用根路径：首页路由可设 meta.breadcrumb = false，避免出现在面包屑中
3. 动态参数处理：对 /user/:id 这类路由，不建议在 meta 中写死 title；应在路由守卫或组件内通过 to.params.id 请求接口获取真实名称，再动态赋值给 to.meta.title

计算属性实时生成面包屑数组

在面包屑组件中，用计算属性过滤并映射 $route.matched：

1. 只保留 meta.breadcrumb !== false 的记录
2. 跳过重定向路由（record.redirect 存在时忽略）
3. 对每个有效记录，提取 record.meta.title 和 record.path，构造 { title, path } 对象
4. 若某层是动态路由（含 : 参数），且未提前设置 title，可 fallback 到 name 或占位符（如“详情页”），但推荐服务端返回后更新

支持点击跳转需校验路径有效性

面包屑中每一项都应是可跳转的，但不是所有 matched 路径都有对应组件：

1. 使用 router.resolve({ name: record.name, params: record.params }) 预检路径是否合法
2. 若 resolve 后 .matched.length === 0，说明该层级无实际组件，应禁用链接（显示为纯文本）
3. 点击时调用 router.push()，而非直接跳转 path 字符串，避免丢失参数或 query

多级嵌套下保持父子关系清晰

动态路由常与嵌套路由共存（如 /org/:orgId/dept/:deptId），此时：

1. 父级路由（/org/:orgId）必须定义 children，子路由 path 写相对路径（如 'dept/:deptId'）
2. 每个子路由也要有独立 meta.title，不能依赖父级继承
3. $route.matched 数组天然按嵌套深度排序，第一项是根，最后一项是当前页，无需手动排序