嵌套路由对应ui布局嵌套，外层固定、内层动态；解决溢出需用flex:1+overflow-y:auto使main占剩余空间并内部滚动，禁用min-height/height:100%。

理解嵌套路由与多层布局的关系

嵌套路由本质是父子路由的组合，对应 UI 上的“布局嵌套”：外层布局（如带侧边栏+顶部导航）固定，内层区域（main）动态渲染子路由内容。溢出问题通常不是路由逻辑导致，而是布局容器未合理约束尺寸，导致子内容撑开 main 区域、破坏整体结构。

确保 main 区域高度受控的关键 CSS

核心思路是让 main 容器不随内容无限增长，而是占据剩余可用空间，并启用滚动。需配合父容器设置高度上下文：

• 根容器设为视口高度：html, body { height: 100%; margin: 0; }
• 外层布局用 Flex 布局：主容器设 display: flex; flex-direction: column; height: 100vh;
• main 区域设为弹性项并隐藏溢出：flex: 1; overflow-y: auto; —— 这保证它填满剩余空间，超出时内部滚动，不撑开父级

避免常见陷阱：不要用 min-height 或 height: 100%

min-height: 100% 在嵌套中易失效，因百分比高度依赖父级显式高度；height: 100% 会强制截断内容，失去滚动能力。Flex 的 flex: 1 是更可靠的选择，它基于剩余空间计算，天然适配嵌套路由的动态内容高度。

结合 Vue Router / React Router 的实际结构示例

以 Vue Router 为例，App.vue 中布局结构应类似：

<template><div class="layout">
    <header>顶部导航</header><aside>侧边栏</aside><main class="main-content"><router-view></router-view><!-- 子路由在此渲染 --></main>
</div>
</template>

对应 CSS 中，.layout 设为 flex column，.main-content 设 flex: 1; overflow-y: auto; 即可稳定承载任意深度的嵌套路由内容，不溢出、不抖动。

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