本质是每层有子路由的组件都必须包含作为渲染容器，否则子路由无处挂载；一级布局组件需含，二级组件若配children也须添加，且子路由path不能以斜杠开头，须严格匹配层级。
多级嵌套路由配置失效，本质不是路由写错了，而是<router-view></router-view>没出现在该出现的位置——每一层有子路由的组件，都必须自己提供一个渲染容器。
父级布局组件必须含 router-view
一级路由（如 /system）对应的组件（如 SystemLayout.vue）不能只是空壳页面。它要承担布局职责：顶部栏、侧边菜单、内容区。其中内容区必须包含 <router-view></router-view>，否则所有子路由组件都没地方挂载。
- 错误写法：组件模板里只有
<el-header></el-header><el-aside></el-aside>，漏掉<router-view></router-view> - 正确写法：在主体内容区域明确插入
<router-view></router-view>，位置通常在侧边栏之后、页脚之前 - 若依等后台框架中，常见于
views/system/index.vue或自定义的Layout.vue文件内
二级路由组件也要有 router-view
当菜单层级达到三级（例如 /system/log/online），路径结构是：一级 → 二级 → 三级。这意味着二级路由组件（如 views/system/log/index.vue）本身也承载子路由，它同样需要 <router-view></router-view> 来渲染三级页面。
- 不要以为“二级组件只展示表格或列表就够了”，只要它下面还配了
children，就必须加容器 - 典型结构：
<div class="app-container">... <router-view></router-view> </div> - 若用的是若依框架，
index.vue文件名是硬性约定，不能改成LogList.vue后就忽略容器逻辑
路由配置需严格匹配路径层级
路径字符串的书写规则直接影响匹配结果。子路由的 path 值不加开头斜杠，是嵌套路由生效的前提。
- 一级路由：
path: '/system' - 二级路由（在
children中）：path: 'log'→ 实际访问地址为/system/log - 三级路由（二级的
children中）：path: 'online'→ 实际为/system/log/online - 切忌写成
path: '/log'或path: '/online'，这会导致路由无法嵌套，直接跳到根路径下匹配，造成白屏
确保每个路由级都有对应 component
Vue Router 是逐层查找的：先找到一级 component，再在其内部找二级，再找三级。任意一层 component 未定义或路径导入错误，后续层级全部中断。
- 检查
import路径是否准确，大小写、文件后缀（.vue）、文件是否存在都要确认 - 在路由配置中，每个
children数组里的对象都必须带component字段，不能遗漏 - 调试技巧：在 Chrome Vue Devtools 中观察当前激活的路由和已创建的组件实例，看哪一层 component 没被实例化
