Vue.js 2 Web Development Projects

Scrolling behavior

The history mode of the router allows us to manage the page scrolling when a route changes. We can reset the position to the top every time, or restore the position the user was in before changing the route (this is very useful when they go back in the browser).

When creating the router instance, we can pass a scrollBehavior function that will get three arguments:

• to is the target route object.
• from is the previous route object.
• savedPosition is the scroll position that has been automatically saved for each entry in the browser history. Each new entry will not have this until the route changes.

The scrollBehavior function expects an object that can take two different forms. The first is the coordinate of the scroll we ...