文章页右侧目录点了没反应,地址栏从 /post/12 变成 /post/12#h2-3,页面纹丝不动,手动刷新一次反而跳过去了。日志里能对上时间点,这种反而好排。
路由把 hash 当成 location 的一部分接管了,scrollBehavior 又固定返回 top: 0,浏览器原生的锚点滚动就被盖掉。首次进入时目标标题还没渲染,跳转同样落空。这一点先确认清楚,后面就不用反复试。
scrollBehavior(to) {
if (to.hash) return { el: to.hash, top: 80 }
return { top: 0 }
}
这次卡住的地方就在「锚点路由跳转」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
别只看报错的最后一行,往上看几行,真正的起因通常在上面。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。
处理上按这个顺序:在 scrollBehavior 里判断 to.hash,有值就返回 el 指向该元素并留出顶栏高度;标题 id 用编码后的值,中文标题直接当 id 匹配不上;锚点是异步渲染的,等数据回来再触发一次滚动。
结果对不对很好判断,点目录项地址栏带上 #,页面平滑滚到对应标题,不再停在顶部。
