Scroll behavior

Another aspect of website navigation that the browser automatically manages is scroll behavior. For example, if you scroll to the bottom of a page, then navigate to a new page, the scroll position is reset. But if you return to the previous page, the scroll position is remembered by the browser, and you're taken back to the bottom.

The browser can't do this when we've hijacked navigation with Vue Router. So, when you scroll to the bottom of the Vuebnb home page and click a listing in Cuba, let's say, the scroll position is unchanged when the listing page component is loaded. This feels really unnatural to the user, who would expect to be taken to the top of the new page:

Figure 7.17. Scroll position issue after navigating with Vue Router

Vue Router has a scrollbehavior method that allows you to adjust where the page is scrolled when you change routes by simply defining the x and y positions of the horizontal and vertical scroll bars. To keep it simple, and yet to still keep...