Прокрутка страницы
Vue Router предоставляет функцию под названием scrollBehavior, которая позволяет управлять поведением прокрутки при переходе между маршрутами. Это полезно для обеспечения плавного и удобного для пользователя переход между страницами.
Вы можете определить функцию scrollBehavior в опциях роутера следующим образом:
- to: Исходящий маршрут
- from: Входящий маршрут
- savedPosition: Сохранённая позиция прокрутки, если таковая имеется
Функция управления прокруткой получает объекты маршрута "туда" и "обратно", так же как навигационные гварды. Третий аргумент, savedPosition, доступен только в том случае, если это всплывающая навигация (запускаемая кнопками браузера "Назад"/"вперед").
Возвращаемое значение
Функция scrollBehavior должна возвращать объект со свойствами top и left, которые указывают положение прокрутки, к которому нужно перейти.
- { top: 0, left: 0 }: Прокрутить в начало страницы
- { behavior: 'smooth' }: Прокрутить к текущей позиции прокрутки с плавной анимацией
- { selector: '.my-element' }: Прокрутить к элементу с классом .my-element
Вы также можете передать селектор CSS или элемент DOM через el. В этом случае top и left будут рассматриваться как относительные смещения для этого элемента.
Если будет возвращено неверное значение или пустой объект, прокрутка не произойдет.
Возврат сохраненной позиции приведет к тому, что при навигации с помощью кнопок "Назад"/"вперед" будет работать как в обычном режиме:
Если вы хотите смоделировать поведение “прокрутки до якоря”
Если ваш браузер поддерживает режим прокрутки, вы можете сделать его плавным используя behavior: ‘smooth’
Отложенный скролл
Иногда нам нужно немного подождать, прежде чем прокручивать страницу. Например, при работе с переходами мы хотим дождаться завершения перехода перед прокруткой. Для этого вы можете вернуть Promise, который возвращает желаемый дескриптор позиции. Вот пример, в котором мы ждем 500мс перед прокруткой:
Это можно связать с событиями из компонента перехода на уровне страницы, чтобы поведение прокрутки хорошо сочеталось с вашими переходами по страницам, но из-за возможных различий и сложности в вариантах использования мы просто предоставляем этот примитив для включения конкретных пользовательских реализаций.
Блокировать скролл
Вы можете заблокировать прокрутку при переходе между маршрутами, для этого можно использовать следующее:
Расширенные приемы
- el: Элемент DOM, к которому привязана функция scrollBehavior
- isRouterReplaced: Указывает, был ли маршрут заменён
- isPop: Флаг, указывающий, является ли переход по маршруту переходом назад или вперёд
Заключение
ScrollBehavior в Vue Router — это мощный инструмент для управления поведением прокрутки при переходах между маршрутами. Он позволяет создавать плавные и удобные для пользователя переходы между страницами