Функция scrollBehavior

Функция scrollBehavior в Vue Router отвечает за управление положением прокрутки при навигации между маршрутами. Она позволяет задавать, где на странице пользователь окажется после перехода на новый маршрут: в начале страницы, в сохранённой позиции или в произвольном месте. Это особенно важно для одностраничных приложений (SPA), где переход между компонентами не вызывает полной перезагрузки страницы.

Синтаксис и подключение

Функция задаётся при создании экземпляра маршрутизатора в объекте конфигурации:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // логика прокрутки
  }
})

export default router

Параметры функции:

  • to — объект маршрута, на который происходит переход.
  • from — объект маршрута, с которого осуществляется переход.
  • savedPosition — объект с координатами прокрутки, если навигация инициирована кнопками назад/вперёд браузера.

Возвращаемое значение

Функция scrollBehavior должна возвращать объект с координатами прокрутки или false:

return { left: 0, top: 0 }  // переместить в начало страницы
return { selector: '#elementId' }  // прокрутить к конкретному элементу
return false  // оставить прокрутку на текущем месте

Ключевые моменты:

  • left — горизонтальная координата прокрутки.
  • top — вертикальная координата прокрутки.
  • selector — CSS-селектор элемента, к которому нужно прокрутить страницу.
  • behavior — опциональный параметр, задающий плавность прокрутки ('smooth' или 'auto').

Использование savedPosition

При навигации с помощью кнопок браузера savedPosition содержит координаты предыдущей позиции прокрутки:

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

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

Прокрутка к определённому элементу

Можно автоматически перемещать пользователя к определённой секции страницы:

scrollBehavior(to) {
  if (to.hash) {
    return { selector: to.hash, beh * avior: 'smooth' }
  } else {
    return { top: 0 }
  }
}
  • to.hash содержит фрагмент URL, например #section1.
  • Прокрутка будет выполнена плавно за счёт параметра beh * avior: 'smooth'.

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

Функция scrollBehavior может возвращать промис, что позволяет выполнять прокрутку после завершения анимаций или асинхронных операций:

scrollBehavior(to, from, savedPosition) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(savedPosition || { top: 0 })
    }, 300)
  })
}

Это полезно, когда контент страницы загружается динамически и высота элементов меняется после рендера.

Советы по использованию

  1. Использовать savedPosition для навигации назад/вперёд. Это обеспечивает привычное поведение для пользователей.
  2. Использовать селекторы для внутренних ссылок. Позволяет реализовать плавную прокрутку к якорям.
  3. Комбинировать с плавной анимацией. Параметр beh * avior: 'smooth' делает переходы более приятными.
  4. Обрабатывать асинхронные страницы. Если страница подгружает данные, стоит использовать промисы, чтобы прокрутка выполнялась после рендера.

Примеры реальных сценариев

Прокрутка к верхней части страницы при переходе на новый маршрут:

scrollBehavior() {
  return { top: 0 }
}

Сохранение позиции при возврате на предыдущую страницу:

scrollBehavior(to, from, savedPosition) {
  return savedPosition || { top: 0 }
}

Плавная прокрутка к якорю на странице:

scrollBehavior(to) {
  if (to.hash) {
    return { selector: to.hash, beh * avior: 'smooth' }
  }
  return { top: 0 }
}

Асинхронная прокрутка после загрузки контента:

scrollBehavior(to, from, savedPosition) {
  return new Promise(resolve => {
    fetchData().then(() => {
      resolve(savedPosition || { top: 0 })
    })
  })
}

Функция scrollBehavior является мощным инструментом для управления пользовательским опытом навигации в SPA, позволяя задавать гибкие правила прокрутки и обеспечивая согласованное поведение на всех маршрутах.

Оглавление