嵌套路由子页面切换后自动回顶的解决方法是手动管理滚动行为：通过 scrollBehavior 配置恢复位置、组件内监听 scrollTop 并存取、结合 keep-alive 缓存及稳定 :key 避免重复销毁。
在嵌套路由中，子页面切换后自动回到顶部是常见问题，根源在于 Vue Router 默认复用组件实例，但未保存或恢复滚动位置。解决的关键是手动管理滚动行为，结合 scrollBehavior 配置与组件内生命周期控制。
启用路由级滚动恢复（适用于页面级路由）
在创建 router 实例时配置 scrollBehavior，对嵌套路由生效需明确指定目标元素或坐标：
- 使用
savedPosition捕获离开时的位置（仅当用户点击浏览器前进/后退时有效） - 对命名视图或嵌套路由，需配合
el选项定位到子容器而非整个窗口 - 示例：让
<router-view name="main"></router-view>内部的滚动容器恢复位置
router.push()）默认不触发 savedPosition，需额外标记
为子组件绑定独立滚动容器并手动保存位置
嵌套路由中，真正滚动的往往不是 或 ，而是某个 div.scroller。此时需在组件内监听并维护其 scrollTop：
- 在
onBeforeUnmount（Vue 3）或beforeDestroy（Vue 2）中记录当前容器 scrollTop，存入sessionStorage或路由 meta - 在
onMounted或activated（keep-alive 场景）中读取并设置 scrollTop - 推荐用唯一 key 标识每个子路由视图，例如
route.path + '-' + route.params.id
配合 keep-alive 缓存子组件状态
若子页面内容不变、仅需保留滚动位置，<keep-alive></keep-alive> 是最轻量方案：
- 包裹
<router-view></router-view>并通过include或v-slot精确缓存目标组件 - 组件被缓存时，DOM 和滚动位置天然保留，无需额外逻辑
- 需注意：若数据需更新（如列表刷新），应在
activated钩子中重新拉取或强制更新部分状态
处理动态路由参数导致的重复组件实例问题
当子路由含动态参数（如 /user/:id），即使组件相同，Vue 默认也会销毁重建——滚动位置必然丢失：
- 在
<router-view></router-view>上添加:key，但不要用$route.fullPath（会导致每次跳转都重建） - 改用稳定标识，例如
:key="$route.name"或:key="getStableKey($route)"（排除变化参数） - 或直接在路由配置中设置
component: () => import('./User.vue')并配合name属性，使keep-alive能正确匹配
