嵌套路由需严格分离布局与内容：父路由为纯布局容器（如AdminLayout），子路由仅负责业务内容；children路径须用相对写法，空路径需显式配置默认组件；菜单和面包屑均通过路由meta字段自动驱动。
嵌套路由不是加几行 children 就完事，关键在结构设计和组件职责划分。父路由必须是纯布局容器，子路由只管内容，否则侧边栏会闪烁、面包屑错乱、状态丢失。
嵌套路由的核心结构：父布局 + 子内容
后台系统常见的「左侧菜单 + 顶部面包屑 + 右侧内容区」，本质就是嵌套路由的典型应用。父组件（如 AdminLayout.vue）不写业务逻辑，只提供固定区域：
• 顶部导航栏
• 左侧可折叠菜单
• 中间主内容区（含 <router-view>）
子路由组件（如 UserList、Dashboard）只负责渲染具体数据和交互，不关心布局。
路由配置要点：children 路径不能带 / 开头
错误写法会导致子路由匹配失败或跳转异常：
- ✅ 正确：子路径用相对写法，
path: 'users'→ 完整 URL 是/admin/users - ❌ 错误：
path: '/users'（以 / 开头会被当成根路径，脱离父级上下文） - ⚠️ 注意空路径：父路由如
/admin想默认展示仪表盘，需显式配一个空子路由：{ path: '', component: Dashboard }
侧边栏菜单联动：靠路由 meta 字段驱动
菜单项不应硬编码，而应从路由配置中自动提取。在路由定义里加 meta 字段：
立即学习“前端免费学习笔记（深入）”；
meta: { title: '用户管理', icon: 'user', order: 1 }meta: { title: '文章管理', icon: 'edit', order: 2 }
然后在侧边栏组件中遍历 $router.options.routes 或使用 router.getRoutes() 筛出有 meta.title 的一级/二级子路由，按 order 排序生成菜单。这样增删菜单只需改路由配置，无需动模板。
多级面包屑：从 $route.matched 回溯生成
当前路由的完整层级信息已存在 $route.matched 数组中，它是按匹配顺序排列的路由记录（从根到最深子路由）。生成面包屑只需：
- 遍历
$route.matched - 过滤掉无
meta.title的布局路由（如 AdminLayout） - 取每个有效项的
meta.title和path构建链接 - 首项可固定为「首页」并指向
/dashboard，其余保持可点击
不需要手动维护路径映射表，也不依赖命名路由——真实、简洁、可维护。
