问题背景
当我们从A页面跳转到B页面,然后在B页面浏览一篇很长的文章,但是这时候我们讲页面滚动到某个位置的时候,我们不小心按了一下浏览器的后退键,这时候我们再按浏览器的前进键的时候会发现,该文章又要从头开始阅读了,这时候就脑壳疼了。
解决
当我们在用vue路由的时候,可以
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
}
})
在route后面加上scrollBehavior这个函数。该scrollBehavior函数接收to和from路由对象。第三个参数savedPosition仅在这是popstate导航(由浏览器的后退/前进按钮触发)时才可用
该函数可以返回滚动位置对象。该对象可以是以下形式:
{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (仅在2.6.0+中支持偏移)
如果返回假值或空对象,则不会进行滚动。
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
上面代码表示:当我使用了浏览器后退键(或前进键)时,返回savedPosition,否则只要使用了页面中的跳转事件页面都会滚动到最上面。
比如:A,B,C三个页面,B页面滚动条位置如下:
当我从B页面通过浏览器后退键返回A页面,再通过浏览器前进键从A页面回到B页面或者从B页面通过浏览器前进键去到C页面,再通过浏览器后退键从C页面回到B页面时,B页面滚动位置不变。但是我们如果是通过A和C页面内的跳转事件回到B页面时,B页面滚动到最顶部