嵌套路由中父页面不滚动、子页面需刷新的关键是父子容器职责分离：父级设为静态布局壳（height:100vh;overflow:hidden），子级独立控制滚动（height:100%;overflow-y:auto）与重渲染（v-if切换router-view）。

嵌套路由中父页面不滚动、子页面却要刷新，本质是布局结构与路由行为没对齐。核心不是“禁用父滚动”，而是让父子容器各司其职：父级固定视口作壳，子级在可控区域内独立渲染与响应。

父组件设为静态容器

父路由组件（如 DashboardLayout）应只承担布局骨架职责，不参与内容滚动或状态管理：

• 样式上明确限制高度：height: 100vh; overflow: hidden;
• 内部必须包含 ，否则子路由无法挂载
• 避免在父组件中写业务逻辑、数据请求或 watch 路由变化——这些都该下沉到子页面

子页面接管滚动与刷新逻辑

每个子页面（如 OverviewPage、UsersPage）需自行控制显示区域和更新行为：

Skill Weave Chains — 技能链路由引擎

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

下载

• 给子页面根元素设 height: 100%; overflow-y: auto;，滚动仅发生在子内容区
• 需要“点击菜单刷新当前页”时，不依赖 router.push（路径未变无效），改用 v-if 控制 router-view 显示状态
• 示例：监听 $route 变化，若 to.path === from.path，短暂置 false 再 true router-view，触发组件重渲染

路由配置避免隐式副作用

空路径重定向虽解决空白问题，但若配置不当会干扰子页面刷新体验：

• 不要用 { path: '', redirect: '' } 或循环指向自身
• 推荐命名路由重定向：{ path: '', redirect: { name: 'DashboardOverview' } }，解耦路径字符串
• 移除父组件上的 key 绑定（如 :key="$route.fullPath"），否则子路由切换也会触发父组件重建

iframe 场景下的补充策略

若整个嵌套路由运行在 iframe 中，还需兼顾外部刷新导致的状态丢失：

• 用 sessionStorage 记录当前子路由路径，在应用初始化时读取并 router.replace 恢复
• 避免使用 localStorage —— 它跨会话持久化，容易残留过期路径
• 主系统可通过 postMessage 主动通知 iframe 更新路由，实现双向同步