路由跳转后页面不滚动，关键在于scrollBehavior函数必须返回含top/el等定位字段的对象、html元素需设置scroll-behavior: smooth样式、savedPosition需做空值判断并提供默认滚动位置。
路由跳转后页面不滚动，通常不是代码没写，而是三个关键环节中至少一个缺失：scrollBehavior 函数没返回有效对象、HTML 没启用 scroll-behavior: smooth、或 savedPosition 判断逻辑有误。Vue Router 的滚动控制是“声明式+样式驱动”组合，缺一不可。
scrollBehavior 必须返回一个非空对象
很多人写了 scrollBehavior 函数，但返回了 undefined、null 或空对象 {}，这会导致浏览器完全忽略滚动行为。
- ✅ 正确写法：返回带坐标或选择器的对象，例如 { top: 0 }、{ el: '#contact' }、{ left: 0, top: 0, behavior: 'smooth' }
- ❌ 错误写法：函数末尾无 return；或只写 if (savedPosition) return savedPosition，却没给 else 分支；或 return {}
- ⚠️ 注意：behavior: 'smooth' 是可选字段，仅控制动画方式；真正触发滚动的是 top/left/el 等定位字段
必须在 html 元素上设置 scroll-behavior: smooth
仅靠 JavaScript 返回 behavior: 'smooth' 不够——它只是提示浏览器“请用平滑方式”，但前提是根滚动容器已启用该能力。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- ✅ 在全局 CSS（如 App.vue 的 style 或 main.css）中添加：html { scroll-behavior: smooth; }
- ❌ 不要写 body { scroll-behavior: smooth; } —— 多数浏览器不认，且 html 才是文档级滚动容器
- ⚠️ 若页面用了自定义滚动区域（如 overflow-y: auto 的 div），需给那个 div 单独加 scroll-behavior: smooth，并确保它有 overflow 属性
正确处理 savedPosition 实现“返回即还原”
savedPosition 只在用户点击浏览器前进/后退按钮（popstate 导航）时才有效，编程式跳转（router.push/router.replace）中它是 null。
- ✅ 推荐判断结构：if (savedPosition) { return savedPosition } else { return { top: 0 } }
- ⚠️ 不要直接 return savedPosition 而不做空值检查，否则 router.push 后会不滚动
- ⚠️ history 模式是前提：scrollBehavior 仅在 mode: 'history' 下生效，hash 模式下该配置被忽略
锚点跳转与 offset 偏移适配固定头部
跳转到 #about 或 { el: '#about' } 时，若页面有吸顶导航栏，目标元素可能被遮挡。
- ✅ Vue Router 4.1+ 支持 offset 配置：{ el: '#about', offset: { top: -80 } }（向上偏移 80px）
- ✅ 旧版本可手动计算：const el = document.querySelector('#about'); return { top: el?.offsetTop - 80 || 0, behavior: 'smooth' };
- ⚠️ 确保目标元素存在且已挂载：若 el 对应 DOM 尚未渲染（如异步组件未加载完），scrollBehavior 会静默失败
