Vue3 scrollBehavior异步滚动：页面过渡后如何resolve Promise

因为Vue3移除了Vue2中的全局事件API，我们可以利用**路由元信息（meta）**来传递Promise的resolve函数，实现在页面过渡的afterEnter中触发滚动逻辑，无需第三方库：

1. 修改scrollBehavior函数 #

在router.js中，将Promise的resolve函数和滚动位置存入目标路由的meta中：

scrollBehavior: (to, from, savedPosition) => {
  return new Promise((resolve) => {
    // 确定滚动位置：有savedPosition就用它，否则默认滚到顶部
    const position = savedPosition || { top: 0 };
    // 把resolve和位置信息存到目标路由的meta里
    to.meta.scrollResolve = { resolve, position };
  });
};

2. 在afterEnter中触发resolve #

在过渡完成的afterEnter函数中，读取当前路由meta里的resolve函数，执行它完成滚动，之后清理缓存避免内存泄漏：

function afterEnter(router) {
  const currentRoute = router.currentRoute.value;
  // 检查是否有存好的滚动逻辑
  if (currentRoute.meta.scrollResolve) {
    const { resolve, position } = currentRoute.meta.scrollResolve;
    // 用$nextTick确保DOM更新后再执行滚动
    router.app.$nextTick(() => resolve(position));
    // 清理meta中的缓存，防止重复触发或内存泄漏
    delete currentRoute.meta.scrollResolve;
  }
}

原理说明 #

scrollBehavior执行时，to是即将进入的目标路由，我们把resolve函数暂存在它的meta属性中；当页面过渡的afterEnter触发时，该路由已经成为当前激活路由（router.currentRoute.value），此时就能取出resolve函数并执行，完成异步滚动的逻辑。

内容的提问来源于stack exchange，提问作者user1584480