本质是每层有子路由的组件都必须包含<router-view>作为渲染容器，否则子路由无处挂载；一级布局组件需含<router-view>，二级组件若配children也须添加，且子路由path不能以斜杠开头，须严格匹配层级。

多级嵌套路由配置失效，本质不是路由写错了，而是<router-view>没出现在该出现的位置——每一层有子路由的组件，都必须自己提供一个渲染容器。

父级布局组件必须含 router-view

一级路由（如 /system）对应的组件（如 SystemLayout.vue）不能只是空壳页面。它要承担布局职责：顶部栏、侧边菜单、内容区。其中内容区必须包含 <router-view>，否则所有子路由组件都没地方挂载。

• 错误写法：组件模板里只有 <el-header></el-header><el-aside></el-aside>，漏掉 <router-view>
• 正确写法：在主体内容区域明确插入 <router-view />，位置通常在侧边栏之后、页脚之前
• 若依等后台框架中，常见于 views/system/index.vue 或自定义的 Layout.vue 文件内

二级路由组件也要有 router-view

当菜单层级达到三级（例如 /system/log/online），路径结构是：一级 → 二级 → 三级。这意味着二级路由组件（如 views/system/log/index.vue）本身也承载子路由，它同样需要 <router-view> 来渲染三级页面。

• 不要以为“二级组件只展示表格或列表就够了”，只要它下面还配了 children，就必须加容器
• 典型结构：<div class="app-container">... <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 没被实例化