我正在使用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
错误时,您可以使用此对象。