Keep page scroll position across vue-router transitions?

Question

JavaScript

I have a component with posts, I also have a specific post component. When going through the router from a specific post back to the home page (where the list of posts is displayed) I do not save the scrolling state of the page, that is, if we scroll to the 90th post, look at it in more detail, and then I make a route back, then the scrolling is at the very top of the page. If you use the method Then all the scroll is saved, but this is equivalent to if we clicked the back arrow in the browser, which I consider a crutch option. How to solve this problem correctly? this.$router.push({name: 'home'})
this.$router.back()

Answer 1

You can try to save in local storage or in the global state scroll when you click on the post https://developer.mozilla.org/en-US/docs/Web/API/W... and when you go to 'home' get the value and scroll to the right place.

Answer 2

In the list section, add a beforeRouteLeave hook, store the current scroll in the store (or wherever).
In the router settings, you can add to the scrollBehavior ( more ) a check for the presence of a saved scroll and, if the result is positive, return . This approach, however, has a couple of disadvantages:{ y: <сохраненное значение> }
Therefore, while scrolling, it is better to save the scrolled anchors (id) and make transitions already using the hash in the URL.

Answer 3

Store pageY in local storage and scroll the page to that location if necessary...