Vue路由器在路线上保存滚动位置并在导航时返回该位置？

Question

我正在使用 Vue Router 和 scrollBehavior，每个路由仍然加载页面顶部 (0,0)，而不是记住我的滚动位置。想我错过了什么？

这是我的路由器代码：

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 };
  }
};
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior,
});

Answer 1

您是否在您正在测试的浏览器中检查了history.pushState 支持？另外，记录savedPosition，因为如果值是假的，则不会发生滚动。创建路由器实例时，您可以提供scrollBehavior给定的函数，

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
  }
})

scrollBehavior 函数接收 to 和 from 路由对象。第三个参数 savedPosition 仅在这是 popstate 导航（由浏览器的后退/前进按钮触发）时可用。

该函数可以返回一个滚动位置对象。对象的形式可以是：

{ x: number, y: number }
//or
{ selector: string, offset? : { x: number, y: number }} //offset only supported in 2.6.0+

如果返回假值或空对象，则不会发生滚动。

注意：此功能仅在浏览器支持history.pushState时有效

如果需要，您可以在导航之前存储当前的滚动偏移量。这是你可以做到的。

const container = document.querySelector('.container')
let scrollOffset = {x: container.scrollTop, y: container.scrollLeft}

现在，在路由前存储scrollOffset，当savedPosition为假时，你可以使用这个对象。