在文章详情页中实现带锚点的平滑滚动，需启用 Vue Router 的 hash 模式，为区块设置合法 id，配置 scrollBehavior 优先响应 to.hash 并设置 behavior: 'smooth' 和 offset 偏移，导航使用 <router-link> 跳转，动态内容加载时通过 setTimeout 或 onMounted 监听 hash 后调用 scrollIntoView。
在文章详情页中实现带锚点的平滑滚动，核心是让路由跳转（如点击目录项）自动滚动到对应区块，同时保持 URL 可分享、可回退、不刷新页面。这不是靠手动调用 scrollIntoView 临时补救，而是通过 Vue Router 的 scrollBehavior 配置 + 合理的 DOM 结构 + 少量偏移修正来系统性解决。
启用 hash 模式并规范锚点结构
确保项目使用 Vue Router 的 hash 模式（默认即如此），这样 URL 中的 #section-2 才能被正确识别为锚点目标。文章内容区块需设置唯一、合法的 id，例如：
<h2 id="introduction">引言</h2><div id="faq">常见问题</div>- 避免使用空格、中文或特殊字符；推荐小写+短横线命名
配置 scrollBehavior 处理锚点跳转
在 router 实例中定义 scrollBehavior，优先响应哈希值，并启用平滑动画：
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
// 若有固定头部，加偏移避免遮挡
offset: { y: 80 }
}
}
// 其他情况：返回时恢复位置，否则回到顶部
if (savedPosition) return savedPosition
return { top: 0 }
}
注意：el: to.hash 会查找匹配的 id 元素；selector: to.hash 是旧写法（Vue Router 4 已统一为 el）。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
导航链接要走标准路由跳转
目录项或侧边栏链接应使用 <router-link>，而非原生 <a href="#xxx">，以保证路由系统介入：
- ✅ 正确：
<router-link to="/article/123#faq">常见问题</router-link> - ❌ 错误：
<a href="#faq">常见问题</a>（绕过 router，不触发 scrollBehavior） - 跳转后 URL 显示为
/article/123#faq，语义清晰，支持直接复制分享
处理动态内容加载导致的滚动延迟
若文章内容通过 API 异步加载（如 markdown 渲染），scrollBehavior 可能执行过早——DOM 还没渲染完成。此时可加简单延迟或监听渲染就绪：
- 在
scrollBehavior中用setTimeout等待 200–300ms，确保元素已挂载 - 更稳妥方式：在组件
onMounted中监听router.currentRoute.value.hash，再调用document.querySelector(hash)?.scrollIntoView() - 避免在
beforeRouteEnter守卫中操作 DOM（此时组件实例未创建）
不复杂但容易忽略细节，把 hash 当作路由的一部分来对待，而不是“视觉效果附加项”，就能让锚点滚动既可靠又符合 SPA 的设计逻辑。
