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

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

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

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

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

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

Функция может возвращать объект позиции ScrollToOptions:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // always scroll to top
    return { top: 0 }
  },
})

Вы также можете передать CSS-селектор или DOM-элемент через el. В этом случае top и left будут обрабатываться как смещения относительно этого элемента.

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // always scroll 10px above the element #main
    return {
      // could also be
      // el: document.getElementById('main'),
      el: '#main',
      top: -10,
    }
  },
})

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

Возврат savedPosition приведет к поведению, аналогичному поведению браузера при навигации с помощью кнопок "Назад" / "Вперед":

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

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

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})

Если ваш браузер поддерживает поведение прокрутки, вы можете сделать её плавной:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
      }
    }
  }
})

Задержка прокрутки

Иногда требуется подождать некоторое время перед прокруткой страницы. Например, при работе с переходами нужно подождать завершения перехода перед прокруткой. Для этого можно вернуть Promise, который возвращает желаемый описатель позиции. Вот пример, где мы ждем 500 мс перед прокруткой:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  },
})

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