Vue-Router进阶之滚动行为详解

什么是滚动行为？为什么需要滚动行为？

在Vue-Router中，我们可以使用路由跳转来实现前后端页面之间的跳转，但是当我们来回切换不同的路由时会发现一个问题：每次切换完页面，新页面都会从顶部开始显示，这给用户带来了不好的体验。

这个问题可以通过设置滚动行为来解决。滚动行为可以定义在路由配置中，配合自定义行为函数，实现路由跳转时页面的平滑滚动。

设置滚动行为

在Vue-Router中，我们可以通过在路由配置中设置scrollBehavior参数来定义滚动行为。这个参数是一个函数，接受三个参数：

to: 即将进入的目标路由对象
from: 当前导航正要离开的路由
savedPosition: 前进/后退时的滚动位置

const Router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 自定义滚动行为
  }
})

自定义行为函数

在scrollBehavior参数中，我们可以编写自定义的行为函数来实现页面的滚动。

我们可以使用以下方式设置页面滚动：

return { x: 0, y: 0 }: 固定滚动位置为顶部。
return { selector: '.some-class' }: 滚动到指定选择器对应的元素。
return new Promise: 异步滚动到指定位置。

示例1：设置固定滚动位置

const Router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 固定滚动到顶部
    return { x: 0, y: 0 }
  }
})

示例2：滚动到指定元素

const Router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 滚动到id为anchor的元素位置
    if (to.hash) {
      return {
        selector: to.hash
      }
    }
  }
})

示例3：异步滚动

const Router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 异步滚动到指定位置
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 1000 })
      }, 500)
    })
  }
})