[vue-router4进阶] 4.滚动行为

如果一个页面特别长，用户已经进行了页面滚动，这时候跳转到了下一个页面，页面滚动应该怎么处理？
vue-router已经给我们提供了scrollBehavior来处理这个问题。
但是这个功能只在支持 history.pushState 的浏览器中可用。
不过也没关系，现代浏览器都是支持的。
scrollBehavior是在createRouter时传入的一个方法，比如我们要在跳转页面时，页面总是滚到顶部：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
   return { top: 0 } // 表示页面滚到顶部
  }
})

它还有三个参数，to是新进入的页面route，from是前一个页面的route，savedPosition表示，如果是浏览器的后退/前进按钮触发的页面切换，这个值是之前这个页面滚动到的位置。
比如，要返回一个页面时，还滚动到这个页面原来的滚动的位置，像浏览器原生的表现那样：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

scrollBehavior还有一些其他配置，我就不多介绍了，大家看官网的说明就行了。