我正在使用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,
});

最佳答案

您是否在要测试的浏览器中检查了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+
如果返回错误值或空对象,则不会滚动。

如果需要,可以在导航之前存储当前滚动偏移量。这是您的操作方法。
const container = document.querySelector('.container')
let scrollOffset = {x: container.scrollTop, y: container.scrollLeft}
现在,在路由之前存储scrollOffset,当savedPosition错误时,您可以使用此对象。

07-24 09:43
查看更多