嵌套路由的 必须置于对应父路由组件模板内，每级路由组件需显式声明一个 作为子路由渲染容器；漏掉任一层将导致后续子路由无法显示。
嵌套路由的 <router-view></router-view> 必须放在**它所对应父路由组件的模板里**，而不是全局或任意位置。核心原则是：每一级路由组件，都要在自己的 template 中显式声明一个 <router-view></router-view>，作为子路由的渲染容器。
父路由组件里必须有且仅有一个 <router-view></router-view>
比如你定义了路径 /user 对应 UserLayout.vue，而它的子路由 /user/profile 和 /user/settings 需要渲染在 UserLayout 内部——那么 UserLayout.vue 的模板中就必须包含：
<template>
<div class="user-layout">
<nav><!-- 导航栏 --></nav>
<main>
<router-view /> <!-- ✅ 子路由内容将在这里渲染 -->
</main>
</div>
</template>没有这行，子路由会“消失”，页面空白。
多层嵌套时，每层都需独立声明 <router-view></router-view>
例如三级路由：/admin/users/list → AdminLayout → UsersLayout → UserList，对应结构如下：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
AdminLayout.vue模板中放一个<router-view></router-view>（承载UsersLayout） -
UsersLayout.vue模板中再放一个<router-view></router-view>（承载UserList） -
UserList.vue是叶子组件，通常不放<router-view></router-view>（除非它还有子路由）
漏掉任何一层，后续层级就无法显示。
避免在同一个组件里重复或错位放置 <router-view></router-view>
常见错误包括：
- 在
App.vue里写多个<router-view></router-view>（一般只需顶层一个） - 把子路由的
<router-view></router-view>放在父路由的<script></script>或<style></style>区域（无效） - 用
v-if或v-show控制<router-view></router-view>显示，导致子路由无法挂载（应控制外层容器，而非 router-view 本身）
配合命名视图可实现复杂排版（进阶）
如果需要同一层级并列展示多个区域（如侧边栏 + 主内容），可用命名视图：
<router-view name="sidebar" /> <router-view name="main" />
对应路由配置中用 components: { sidebar: ..., main: ... } 指定。但注意：命名视图不改变嵌套层级，只是同级分块，仍需按层级在对应组件中放置。
