Vue Router 4.2路由返回时带偏移滚动元素的替代方案咨询

由于Vue Router 4.2已移除scrollBehavior中的offset参数，直接返回带offset的配置不再生效。针对滚动到哈希元素被顶部遮挡的问题，提供两种可行替代方案：

方案一：通过Promise手动计算滚动位置 #

利用scrollBehavior支持返回Promise的特性，等待DOM渲染完成后计算目标元素位置并添加偏移：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (from.hash) {
      return new Promise((resolve) => {
        // 等待DOM更新，确保目标元素已挂载
        setTimeout(() => {
          const target = document.querySelector(from.hash);
          if (target) {
            // 计算元素绝对位置并减去偏移量（示例中为160px）
            const scrollTop = target.getBoundingClientRect().top + window.pageYOffset - 160;
            resolve({
              top: scrollTop,
              behavior: 'smooth'
            });
          } else {
            resolve({ top: 0 });
          }
        }, 100);
      });
    } else if (savedPosition) {
      return savedPosition;
    }
    return { top: 0 };
  }
});

说明： #

• 使用Promise是为了确保路由切换后目标元素已渲染完成，避免获取不到DOM节点的问题
• getBoundingClientRect().top获取元素相对于视口的顶部位置，加上window.pageYOffset得到页面绝对滚动位置，再减去需要的偏移量
• 延迟时间可根据项目实际渲染速度调整，也可以用Vue的nextTick替代setTimeout（scrollBehavior中用setTimeout更直接）

方案二：结合scrollIntoView和scrollBy手动控制滚动 #

直接调用原生DOM方法完成滚动，返回false告知Vue Router跳过默认滚动处理：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (from.hash) {
      setTimeout(() => {
        const target = document.querySelector(from.hash);
        if (target) {
          // 先滚动到元素顶部
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
          // 再向上偏移指定距离
          window.scrollBy({ top: -160, behavior: 'smooth' });
        }
      }, 100);
      // 阻止Vue Router的默认滚动行为
      return false;
    } else if (savedPosition) {
      return savedPosition;
    }
    return { top: 0 };
  }
});

优化点： #

如果顶部导航高度是动态的（比如响应式布局），可以动态计算偏移量而非硬写数值：

const navBar = document.querySelector('#your-navbar-id');
const offset = navBar ? navBar.offsetHeight : 160;
// 后续用offset代替160

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