嵌套路由需严格分离布局与内容：父路由为纯布局容器（如adminlayout），子路由仅负责业务内容；children路径须用相对写法，空路径需显式配置默认组件；菜单和面包屑均通过路由meta字段自动驱动。

嵌套路由不是加几行 children 就完事，关键在结构设计和组件职责划分。父路由必须是纯布局容器，子路由只管内容，否则侧边栏会闪烁、面包屑错乱、状态丢失。

嵌套路由的核心结构：父布局 + 子内容

后台系统常见的「左侧菜单 + 顶部面包屑 + 右侧内容区」，本质就是嵌套路由的典型应用。父组件（如 AdminLayout.vue）不写业务逻辑，只提供固定区域：
• 顶部导航栏
• 左侧可折叠菜单
• 中间主内容区（含 <router-view></router-view>）
子路由组件（如 UserList、Dashboard）只负责渲染具体数据和交互，不关心布局。

路由配置要点：children 路径不能带 / 开头

错误写法会导致子路由匹配失败或跳转异常：

• ✅ 正确：子路径用相对写法，path: 'users' → 完整 URL 是 /admin/users
• ❌ 错误：path: '/users'（以 / 开头会被当成根路径，脱离父级上下文）
• ⚠️ 注意空路径：父路由如 /admin 想默认展示仪表盘，需显式配一个空子路由：{ path: '', component: Dashboard }

侧边栏菜单联动：靠路由 meta 字段驱动

菜单项不应硬编码，而应从路由配置中自动提取。在路由定义里加 meta 字段：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 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，其余保持可点击

不需要手动维护路径映射表，也不依赖命名路由——真实、简洁、可维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！