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

Question

[skuvaWeb]

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

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

Как правильно решить данную проблему?

Answer 1

[Guccigang]

Можно попробовать сохранять в local storage или в глобальном стейте скролл при клике на пост https://developer.mozilla.org/en-US/docs/Web/API/W... а при переходе на 'home' доставать значение и скролить к нужному месту.

Comments

[skuvaWeb]

Да, этот вариант приемлем, возможно вы знаете ещё какие-нибудь решения?

Answer 2

[Klein Maximus]

В разделе списка добавьте хук beforeRouteLeave, сохраните в store (или еще где) текущий скролл.
В настройках роутера можно добавить в scrollBehavior (еще) проверку на наличие сохраненного скролла и, при положительно результате, возвращать { y: <сохраненное значение> }.

У данного подхода, правда есть пара минусов:

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

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