Vue Router 与 Vite 集成时的滚动行为不符合预期问题

我之前在项目里也碰到过一模一样的情况，明明照着文档写了scrollBehavior，结果新页面就是不肯滚到顶部。咱们一步步来排查和解决：

首先，先确认最基础的点：你的Vue Router版本是不是和Vue 3匹配的@vue/router@4.x？如果装错了版本，钩子函数可能根本不触发。可以在终端里跑npm list @vue/router看看版本号。

接下来，先检查scrollBehavior钩子有没有真的执行——这是很多人忽略的点。你可以在函数里加个console.log，比如：

scrollBehavior(to, from, savedPosition) {
  console.log('滚动钩子触发了：', to.path, from.path, savedPosition);
  if (savedPosition) {
    return savedPosition;
  } else {
    return { top: 0 };
  }
}

然后切换页面，看浏览器控制台有没有输出。如果没输出，那大概率是你的Router实例没正确挂载到Vue应用上，比如漏了app.use(router)这一步，或者路由配置有语法错误。

如果钩子确实执行了，但滚动还是没生效，那十有八九是页面渲染时机的问题。Vite的组件懒加载和快速HMR可能导致页面内容还没渲染完，scrollBehavior的滚动指令就先执行了，等内容加载出来后，页面又被顶下去了。这时候咱们可以把滚动逻辑改成异步的，等DOM更新完成后再执行：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else {
    // 用Promise延迟到下一个微任务再滚动，确保页面渲染完成
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ top: 0 });
      }, 0);
    });
  }
}

还有一种情况：如果你的页面滚动容器不是window本身（比如<router-view>放在了一个设置了overflow: auto的div里），那scrollBehavior里的top: 0是针对window的，自然不会生效。这时候你需要指定滚动容器的选择器：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { el: '#app', top: 0 }; // 替换成你的滚动容器ID/类名
  }
}

如果上面的方法都不管用，那可以试试绕开scrollBehavior，直接用全局路由守卫来控制滚动：

// 在Router实例创建后添加
router.afterEach((to, from) => {
  // 只有非后退/前进的导航才滚到顶部
  if (!from.meta.keepAlive && !to.meta.saveScrollPosition) {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }
});

这种方式更直接，因为是在页面切换完成后直接调用浏览器的原生滚动API，几乎不会有时机问题。

最后别忘了测试后退/前进按钮，确认之前的滚动位置依然能正确恢复。

内容来源于stack exchange