嵌套路由的 必须置于对应父路由组件模板内，每级路由组件需显式声明一个 作为子路由渲染容器；漏掉任一层将导致后续子路由无法显示。

嵌套路由的 必须放在**它所对应父路由组件的模板里**，而不是全局或任意位置。核心原则是：每一级路由组件，都要在自己的 template 中显式声明一个 ，作为子路由的渲染容器。

父路由组件里必须有且仅有一个

比如你定义了路径 /user 对应 UserLayout.vue，而它的子路由 /user/profile 和 /user/settings 需要渲染在 UserLayout 内部——那么 UserLayout.vue 的模板中就必须包含：

<template><div class="user-layout">
    <nav><!-- 导航栏 --></nav><main><router-view></router-view><!-- ✅ 子路由内容将在这里渲染 --></main>
</div>
</template>

没有这行，子路由会“消失”，页面空白。

多层嵌套时，每层都需独立声明

例如三级路由：/admin/users/list → AdminLayout → UsersLayout → UserList，对应结构如下：

• AdminLayout.vue 模板中放一个 （承载 UsersLayout）
• UsersLayout.vue 模板中再放一个 （承载 UserList）
• UserList.vue 是叶子组件，通常不放 （除非它还有子路由）

漏掉任何一层，后续层级就无法显示。

Skill Weave Chains — 技能链路由引擎

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

下载

避免在同一个组件里重复或错位放置

常见错误包括：

• 在 App.vue 里写多个 （一般只需顶层一个）
• 把子路由的 放在父路由的 <script></script> 或 区域（无效）
• 用 v-if 或 v-show 控制 显示，导致子路由无法挂载（应控制外层容器，而非 router-view 本身）

配合命名视图可实现复杂排版（进阶）

如果需要同一层级并列展示多个区域（如侧边栏 + 主内容），可用命名视图：

<router-view name="sidebar"></router-view><router-view name="main"></router-view>

对应路由配置中用 components: { sidebar: ..., main: ... } 指定。但注意：命名视图不改变嵌套层级，只是同级分块，仍需按层级在对应组件中放置。