vue的aftereach钩子用于路由跳转后统一重置滚动位置，因单页应用不刷新页面导致滚动位置残留，故需在导航完成、dom更新后执行window.scrollto(0,0)；支持通过meta控制是否重置及hash锚点滚动，但异步组件加载时需额外处理。
Vue 的 afterEach 是路由全局后置钩子，它在导航成功完成、DOM 更新之后执行，适合做页面跳转后的统一处理，比如滚动位置重置。
为什么用 afterEach 重置滚动？
单页应用中，切换路由不会刷新页面，浏览器也不会自动回到顶部；若上一页滚动在中间，下一页可能也停留在相同位置，体验不自然。使用 afterEach 可以在每次跳转完成后统一将页面滚回顶部（或指定位置），无需每页手动调用。
基础用法：滚动到页面顶部
在初始化路由实例后，直接注册 afterEach 钩子：
const router = createRouter({ /* 配置 */ })
<p>router.afterEach((to, from) => {
// 页面跳转完成后，滚动到顶部
window.scrollTo(0, 0)
})</p>更精准的滚动控制（适配 keep-alive 或锚点）
如果项目用了 <keep-alive></keep-alive>，或某些页面需要保留滚动位置（如列表页返回时恢复原位置），可结合路由元信息或条件判断：
- 在路由配置中添加
meta: { resetScroll: true }控制是否重置 - 对 hash 路由（如
/about#contact）可额外跳转到对应元素 - 使用
document.documentElement.scrollTop = 0或window.scrollTo()均可，推荐后者兼容性更好
router.afterEach((to, from) => {
// 默认重置，除非显式设置 meta.resetScroll = false
if (to.meta.resetScroll !== false) {
window.scrollTo(0, 0)
}
<p>// 若有 hash，尝试滚动到对应元素
if (to.hash) {
const el = document.querySelector(to.hash)
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}
})</p>注意：不适用于异步组件加载中的滚动
afterEach 在导航确认、DOM 渲染完成后触发，但若页面组件是异步加载（defineAsyncComponent）、且内容高度动态变化（如拉取数据后才渲染长列表），此时 scrollTo(0,0) 可能被后续内容撑开而失效。这种场景建议在组件 onMounted 中再次调用，或监听数据加载完成后再滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
