@skuvaWeb

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

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

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

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

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

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

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

Войти через TM ID
Похожие вопросы
Ingram Micro Cloud Москва
от 170 000 руб.
//stablecode Вена
от 110 000 до 140 000 руб.
IT Company Санкт-Петербург
от 120 000 до 200 000 руб.
22 янв. 2019, в 00:48
60 руб./за 1000 зн.
22 янв. 2019, в 00:09
120000 руб./в месяц
21 янв. 2019, в 23:37
1000 руб./за проект