Поведение прокрутки

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

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

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

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

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

Функция может вернуть объект с позицией прокрутки. Объект может иметь вид:

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (смещение поддерживается только в 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 }
    }
  }
}

Мы также можем использовать мета-данные маршрута для точного управления поведением прокрутки. Полный пример можно найти здесь.

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

Новая функция в 2.8.0

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

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',
    }
  }
}