@skuvaWeb

Сохранять позицию скролла страницы при переходах vue-router?

У меня есть компонент с постами, так же есть компонент конкретного поста. При переходе через router из конкретного поста обратно на домашную страницу (где выводится список постов) this.$router.push({name: 'home'})
У меня не сохраняется состояние прокрутки страницы, то есть если мы долистали до 90-го поста, посмотрели его подробнее, и затем я делаю роут назад, то прокрутка оказывается в самом начале страницы.

Если использовать способ this.$router.back()
То все скролл сохраняется, но это равносильно тому, если бы мы нажали стрелку назад в браузере, что считаю костыльным вариантом.

Как правильно решить данную проблему?
  • Вопрос задан
  • 2247 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Guccigang
Можно попробовать сохранять в local storage или в глобальном стейте скролл при клике на пост https://developer.mozilla.org/en-US/docs/Web/API/W... а при переходе на 'home' доставать значение и скролить к нужному месту.
Ответ написан
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
В разделе списка добавьте хук beforeRouteLeave, сохраните в store (или еще где) текущий скролл.
В настройках роутера можно добавить в scrollBehavior (еще) проверку на наличие сохраненного скролла и, при положительно результате, возвращать { y: <сохраненное значение> }.

У данного подхода, правда есть пара минусов:
  1. при одном и том же URL скролл может оказаться в разных местах;
  2. может получиться так, что за время перехода на главную и обратно, изменились данные и высота прокрученных блоков.

Поэтому, во время скролла лучше сохранять промотанные якоря (id) и делать переходы уже с использованием хэша в URL.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы