Vue Router 在路线上保存滚动位置并在导航回来时返回到该位置？

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函数接收往返路线对象。第三个参数 ，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为假时，您可以使用该对象。