vue路由的scrollBehavior的使用

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/86502786

问题背景

当我们从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页面滚动到最顶部