Vue Router 滚动行为

滚动行为

滚动行为

vue-router可以让你自定义路由切换时页面如何滚动(滚动到顶部或保持原先的滚动位置)。

注：该功能只在支持history.pushState的浏览器中可用。

可以在Router实例中提供一个scrollBehavior方法：

const router = new VueRouter({
    routes,
    scrollBehavior(to, from, savedPosition) {
        return {
            x: 0,
            y: 400
        }
    }
})

scrollBehavior方法接收三个参数：to、from、savedPosition

to：Route  目标路由对象

from：Route  当前要离开的路由对象

savedPosition：Object  记录离开前的滚动位置  { x : number, y : number }

scrollBehavior方法的返回值：PositionResult

当且仅当popstate导航(即通过浏览器的前进/后退按钮触发)时才可用。

查看scrollBehavior方法的底层代码：

scrollBehavior?: (
  to: Route,
  from: Route,
  savedPosition: Position | void
) => PositionResult | Promise<PositionResult> | undefined | null

所以从上面可以看出，scrollBehavior方法可以返回undefined、null、PositionResult(同步滚动)、Promise<PositionResult>(异步滚动)。

再进一步，Postion：

type Position = { x: number; y: number }

PositionResult：

type PositionResult = Position | { selector: string; offset?: Position, behavior?: ScrollBehavior } | void

|后面一大堆不知道什么意思，但前面的Position前面有提过，其实就是当前的滚动位置。

若返回一个falsy(虚值，在Boolean上下文中认为是false的值，包含但不限于false)的值，或者一个空对象({  })，则不会发生滚动。

返回值举例🍸：

1.直接返回带x,y坐标的对象，对于所有路由导航，简单地让页面滚动到顶部

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

2.返回savedPosition，在按下后退/前进按钮时，才能用

如果是点击前进/后退，跳转后仍保留在当前位置->返回savedPosition

否则就是普通的路由跳转，滚动到顶部->直接返回Position(即坐标对象)

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

3.返回带selector选择器的对象

模拟‘滚动到锚点’的行为

这里的selector就是元素选择器，对于html中有一元素<p id="anchor2" style="height:500px">Anchor2</p>，to.hash的值可以是‘#anchor2’

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

异步滚动

即返回Promise<PositionResult>。

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。

平滑滚动

将behavior选项添加到scrollBehavior返回的对象中，就可以为支持它的浏览器启用原生平滑滚动

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}