Vue Router嵌套路由与面包屑导航紧密配合：嵌套路由需在children中显式声明相对路径子路由并配router-view；面包屑从to.matched提取meta.title生成，根路径和redirect不参与，matched数组天然反映层级结构。
Vue Router 的嵌套路由和面包屑导航不是两个孤立功能，而是紧密配合的结构化导航方案。核心在于：路由配置体现层级关系，而面包屑则从当前路由路径中提取并渲染出可追溯的层级链路。
嵌套路由需用 children 明确父子关系
嵌套路由不是靠路径拼接自动识别，必须在父级路由配置中显式声明 children 数组，并确保子路由的 path 为相对路径（不以 / 开头）。
- 父路由的 component 必须包含 <router-view>，否则子组件无法渲染
- 子路由的 path 写成 'list'（而非 '/admin/list'），完整路径由父路径 + 子路径拼接生成
- 若需默认子路由，可添加一个空 path 的子项：{ path: '', component: DefaultView }
面包屑数据应从路由记录的 meta 中提取
每个路由配置中通过 meta 字段声明面包屑所需信息（如 title、icon 或 hidden 标志），避免硬编码或运行时解析路径字符串。
- 推荐结构：meta: { title: '用户管理', breadcrumb: true }
- 根路径（如 '/'）通常不显示在面包屑中，可通过 meta.breadcrumb === false 过滤
- 动态路由参数（如 /user/:id）的面包屑标题可用 props: true + 组件内计算属性处理，或在 beforeEach 中动态设置 to.meta.title
面包屑组件需递归遍历 matched 数组
当前路由对象的 matched 属性是一个按匹配深度排序的路由记录数组，它天然反映嵌套层级，是生成面包屑的可靠依据。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- 遍历 to.matched，过滤掉 meta.breadcrumb !== true 的项
- 每项对应一个面包屑节点，meta.title 作文字，route.path 作跳转链接
- 末尾项通常禁用链接（当前页），可用 index === matched.length - 1 判断
注意命名视图与多级嵌套的边界情况
当使用命名视图（components: { default: ..., sidebar: ... }）或多层嵌套（如 A → B → C → D）时，面包屑逻辑不变，但需确保每一级都正确设置了 meta 和 router-view。
- 某一级未设 meta.title，该级将缺失文字（可设默认值或跳过）
- 某一级未渲染 <router-view>，其子路由不会被激活，自然也不会出现在 matched 中
- 重定向路由（redirect）本身不参与面包屑，目标路由才计入 matched
不复杂但容易忽略的是 meta 的统一管理和 matched 的实际结构——它比路径字符串更能准确反映用户当前所处的“页面栈”。
