Поведение прокрутки страницы

При переходе между страницами в рамках клиентской маршрутизации, можно сохранять позицию прокрутки для каждой записи в истории (что обычно делают браузеры при работе с традиционными приложениями), или же прокручивать страницу наверх. vue-router позволяет использовать оба варианта, и даже более того — позволяет полностью настроить поведение прокрутки при навигации.

Примечание: эта возможность работает если браузер поддерживает history.pushState.

При создании экземпляра маршрутизатора, вы можете указать функцию scrollBehavior:

const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // возвращаем требуемую позицию прокрутки
  }
})

Функция scrollBehavior получает объекты маршрутов to и from. В третьем параметре, savedPosition, передаётся сохранённая в истории браузера позиция прокрутки (только в случае popstate-перехода, вызванного нажатием кнопок вперёд/назад в браузере).

Функция возвращает объект позиции прокрутки. Он может иметь одну из двух форм:

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset поддерживается в 2.6.0+)

Если возвращается пустой объект или значение, приводимое к ложному, прокрутки не будет.

Например:

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

Таким образом мы заставим браузер прокручивать к началу каждой открытой страницы.

Возврат savedPosition позволяет эмулировать нативное поведение браузера при использовании кнопок назад/вперёд:

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

Эмулировать поведение "прокрутки к якорю" на странице можно так:

scrollBehavior(to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

Можно также использовать метаданные путей для более сложного управления прокруткой. Полную реализацию этого подхода можно посмотреть в этом примере (opens new window).

Асинхронная прокрутка

Добавлено в версии 2.8.0

Можно также вернуть Promise, который разрешится объектом с желаемой позицией прокрутки:

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

Это можно связать с событиями компонента transition на уровне страницы, чтобы реализовать такое поведение прокрутки, которое сочетается с анимациями перехода между страницами, но из-за множества возможных вариантов и комплексности примеров, мы просто предоставляем этот простой пример, чтобы показать где можно разместить собственную реализацию.

Плавная прокрутка

Можно включить нативную плавную прокрутку для браузеров, которые поддерживают её (opens new window), просто добавив опцию behavior к объекту, возвращаемому из scrollBehavior:

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