VueRouter中scrollBehavior的savedPosition如何添加smooth平滑滚动

直接在Promise resolve的位置对象中追加behavior: 'smooth'配置即可，Vue Router的scrollBehavior原生支持该滚动参数，会自动调用浏览器平滑滚动能力，不需要额外做其他适配。

修改后的代码：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          ...savedPosition,
          behavior: 'smooth'
        });
      }, 1000);
    });
  }
  // 其余滚动场景可自行补充，例如默认回到顶部的逻辑
  return { top: 0, behavior: 'smooth' };
},

注意事项 #

• behavior: 'smooth'是浏览器原生滚动API的标准配置，所有现代浏览器均已原生支持，无需引入第三方滚动库或额外polyfill
• 如果页面存在图片、懒加载组件等异步渲染内容，1000ms的延迟可能仍然无法匹配真实DOM渲染完成时机，可根据实际业务调整延迟时长，或监听对应DOM渲染完成后再resolve滚动位置

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