Saving scrolling position when hitting back

In vue-router, there are two modes of navigation: hash and history. The default mode and the one used in the previous recipes is previouslye. Traditionally, when you visit a website, scroll down a bit and click on a link to another page; the new page displays from the top. When you click on the browser's back button, the page displays from the previous scrolled height and the link you just clicked on is visible.

This is not true when you are in an SPA, or at least is not automatic. The vue-router history mode lets you simulate this or, even better, have fine-grained control of what happens to your scrolling.

Getting ready

To complete this recipe, we will need to switch to history mode. History mode only works when the app is running on a properly configured server. How to configure a server for SPA is out of the scope of this book (but the principle is that every route gets redirected from the server side to index.html).

We will use an npm program...