探讨 Vue Router 源码中 `scrollBehavior` 选项的实现，以及它如何控制页面滚动行为。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们来聊聊Vue Router里那个神奇的scrollBehavior选项，看看它到底是怎么控制我们页面滚动的，让页面跳转不再像脱缰的野马，而是变得可控，优雅。

开场白：滚动，你别乱跑！

想象一下，你辛辛苦苦在一个长长的页面上浏览，突然点击了一个链接，结果页面“嗖”的一声跳到了顶部，你是不是想抓狂？这时候，scrollBehavior就派上用场了，它就像一个老司机，能帮你把控页面滚动的位置，让你跳转得更顺滑，更舒服。

scrollBehavior：路由界的“老司机”

scrollBehavior是Vue Router配置项中的一个函数，它允许你自定义路由切换时的滚动行为。简单来说，就是告诉浏览器，当用户从一个页面跳转到另一个页面时，应该把页面滚动到什么位置。

scrollBehavior函数的参数：导航信息

scrollBehavior函数接收三个参数，分别是：

to: 即将要进入的目标路由对象。包含了目标路由的所有信息，比如path、query、params、hash等等。
from: 当前导航正要离开的路由对象。类似to，包含了当前路由的所有信息。
savedPosition: (仅在使用 popstate 导航时可用) 上一次滚动的位置。这个参数只有在使用浏览器的前进/后退按钮时才有效，记录了你离开当前页面时的滚动位置。

scrollBehavior函数的返回值：滚动位置

scrollBehavior函数的返回值决定了页面的滚动位置，它可以是以下几种形式：

{ x: number, y: number }: 滚动到指定的 x 和 y 坐标。例如 { x: 0, y: 100 }表示滚动到横坐标为0，纵坐标为100的位置。
{ selector: string }: 滚动到匹配选择器的元素。例如 { selector: '#app' }表示滚动到id为app的元素。
{ selector: string, offset: { x: number, y: number } }: 滚动到匹配选择器的元素，并加上指定的偏移量。例如 { selector: '#app', offset: { x: 0, y: 10 } }表示滚动到id为app的元素，然后向下偏移10个像素。
undefined 或 null: 保持当前滚动位置。

scrollBehavior的默认行为：简单粗暴的跳到顶部

如果没有配置scrollBehavior，Vue Router的默认行为是在每次路由切换后，都将页面滚动到顶部。这在很多情况下都不是我们想要的。

scrollBehavior的常见应用场景：让滚动更丝滑

回到顶部：最基本的用法
```
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})
```
这段代码告诉浏览器，每次路由切换后，都将页面滚动到顶部。这相当于一个“一键回到顶部”的功能。
保留滚动位置：前进后退时的惊喜
```
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})
```
这段代码在用户点击浏览器的前进/后退按钮时，会将页面滚动到上一次离开时的位置。这能极大地提升用户体验，避免用户在历史页面中迷失。
滚动到指定元素：锚点链接的福音
```
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return { selector: to.hash }
    } else {
      return { x: 0, y: 0 }
    }
  }
})
```
这段代码实现了锚点链接的功能。当URL中包含#号时，会将页面滚动到对应的元素。例如，访问/#section2会将页面滚动到id为section2的元素。

带偏移量的滚动：更精细的控制

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash,
        offset: { x: 0, y: 100 } // 向下偏移100像素
      }
    } else {
      return { x: 0, y: 0 }
    }
  }
})

这段代码在滚动到指定元素后，还会加上一个偏移量。这可以用来避免元素被固定头部遮挡的情况。

异步滚动：处理动态内容

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 100 })
      }, 500) // 延迟500毫秒后滚动
    })
  }
})

这段代码使用Promise来实现异步滚动。这在处理动态加载的内容时非常有用，可以确保内容加载完成后再滚动。

源码剖析：scrollBehavior的幕后英雄

虽然我们直接使用的是scrollBehavior这个配置项，但Vue Router内部是如何实现它的呢？接下来，我们就来简单剖析一下Vue Router源码中与scrollBehavior相关的部分（简化版本，仅供参考）。

createMatcher：路由匹配器

在Vue Router的初始化过程中，createMatcher函数会创建一个路由匹配器，用于匹配URL和路由配置。
```
function createMatcher (routes, router) {
  // ...
  return {
    match: matchRoute,
    addRoutes: addRoutes
  }
}
```
push和replace：路由跳转的入口

push和replace是Vue Router提供的两个路由跳转方法。它们最终会调用transitionTo函数来执行实际的路由切换。
```
VueRouter.prototype.push = function push (location, onComplete, onAbort) {
  // ...
  this.transitionTo(location, onComplete, onAbort)
}
```

transitionTo：路由切换的核心

transitionTo函数负责执行实际的路由切换，包括匹配路由、更新组件、以及调用scrollBehavior函数。

VueRouter.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) {
  // ...
  const route = this.matcher.match(location, this.currentRoute)
  // ...
  this.updateRoute(route)
  // ...
  this.onRouteChange(route, this.currentRoute, isReplace, onComplete)
  // ...
}

onRouteChange：滚动行为的触发点

onRouteChange函数在路由切换完成后被调用，它会检查是否存在scrollBehavior选项，并调用它来获取滚动位置。

VueRouter.prototype.onRouteChange = function onRouteChange (route, prev, isReplace, onComplete) {
  // ...
  if (this.options.scrollBehavior) {
    const scrollPosition = this.options.scrollBehavior.call(this, route, prev, this.savedPosition)
    this.handleScroll(scrollPosition, isReplace)
  }
  // ...
}

handleScroll：执行滚动操作

handleScroll函数接收scrollBehavior函数的返回值，并执行实际的滚动操作。

VueRouter.prototype.handleScroll = function handleScroll (scrollPosition, isReplace) {
  if (!scrollPosition) {
    return
  }

  if (typeof scrollPosition.then === 'function') {
    scrollPosition.then(scrollPosition => {
      this.scrollToPosition(scrollPosition, isReplace)
    })
  } else {
    this.scrollToPosition(scrollPosition, isReplace)
  }
}

scrollToPosition：最终的滚动函数

scrollToPosition函数根据scrollPosition的类型，执行不同的滚动操作。

VueRouter.prototype.scrollToPosition = function scrollToPosition (scrollPosition, isReplace) {
  if (typeof scrollPosition === 'object') {
    if (typeof scrollPosition.selector === 'string') {
      // 滚动到指定元素
      const element = document.querySelector(scrollPosition.selector)
      if (element) {
        const offset = scrollPosition.offset || { x: 0, y: 0 }
        window.scrollTo({
          left: element.offsetLeft + offset.x,
          top: element.offsetTop + offset.y,
          behavior: 'smooth' // 可以添加平滑滚动效果
        })
      }
    } else if (typeof scrollPosition.x === 'number' || typeof scrollPosition.y === 'number') {
      // 滚动到指定坐标
      window.scrollTo({
        left: scrollPosition.x || 0,
        top: scrollPosition.y || 0,
        behavior: 'smooth' // 可以添加平滑滚动效果
      })
    }
  }
}

简化版代码示例：模拟scrollBehavior的实现

为了更好地理解scrollBehavior的实现原理，我们可以用一段简单的代码来模拟它的功能。

function handleScroll (to, from, savedPosition, scrollBehavior) {
  const scrollPosition = scrollBehavior(to, from, savedPosition)

  if (!scrollPosition) {
    return
  }

  if (typeof scrollPosition === 'object') {
    if (typeof scrollPosition.selector === 'string') {
      const element = document.querySelector(scrollPosition.selector)
      if (element) {
        window.scrollTo({
          left: element.offsetLeft,
          top: element.offsetTop,
          behavior: 'smooth'
        })
      }
    } else if (typeof scrollPosition.x === 'number' || typeof scrollPosition.y === 'number') {
      window.scrollTo({
        left: scrollPosition.x || 0,
        top: scrollPosition.y || 0,
        behavior: 'smooth'
      })
    }
  }
}

// 模拟路由切换
function navigateTo (to, from, savedPosition, scrollBehavior) {
  // ... (执行路由切换的其他逻辑)

  // 处理滚动行为
  handleScroll(to, from, savedPosition, scrollBehavior)
}

// 使用示例
const to = { path: '/page2', hash: '#section1' }
const from = { path: '/page1' }
const savedPosition = { x: 100, y: 200 }

const scrollBehavior = (to, from, savedPosition) => {
  if (to.hash) {
    return { selector: to.hash }
  } else if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

navigateTo(to, from, savedPosition, scrollBehavior)

总结：scrollBehavior，让滚动更听话

scrollBehavior是Vue Router中一个非常实用的选项，它可以让你自定义路由切换时的滚动行为，提升用户体验。通过灵活运用scrollBehavior，你可以实现各种各样的滚动效果，让页面跳转不再生硬，而是变得流畅自然。

scrollBehavior选项的特点概括

特性	描述
类型	函数 (`(to: Route, from: Route, savedPosition: { x: number, y: number } \| undefined) => { x: number, y: number } \| { selector: string } \| { selector: string, offset: { x: number, y: number } } \| undefined \| null \| Promise`)
作用	定义路由切换时的滚动行为。
参数	`to` (目标路由对象), `from` (当前路由对象), `savedPosition` (上一次滚动的位置，仅在使用 `popstate` 导航时可用)。
返回值	决定滚动位置，可以是坐标、选择器、带偏移量的选择器、`undefined` 或 `null`，也可以是`Promise`。
默认行为	默认情况下，每次路由切换后，页面都会滚动到顶部。
应用场景	回到顶部、保留滚动位置、滚动到指定元素（锚点链接）、带偏移量的滚动、异步滚动等。
重要性	提升用户体验，使页面跳转更流畅自然。
可定制性	高度可定制，可以根据不同的需求实现各种各样的滚动效果。
高级用法	可以结合`Promise`处理异步加载的内容，确保内容加载完成后再滚动。
兼容性	良好的浏览器兼容性。

结束语：让你的页面滚动起来！

希望今天的讲座能帮助大家更好地理解Vue Router的scrollBehavior选项。记住，滚动行为虽然看似不起眼，但却能极大地影响用户体验。花点心思，让你的页面滚动起来吧！

好了，今天的分享就到这里，感谢各位的收看，下期再见！

发表回复 取消回复

发表回复取消回复