Vuejs fallback back to the previous scrolling position without using history

In Vuejs, when switching to a new route, you want the page to roll to the top, or to keep the original scrolling position, just like reloading the page (borrowing the Vuejs official document), but the official document uses routing to control the scrolling behavior based on the HTML5 history mode (see here) , but I did not use this model at the outset, if the project is modified, too time-consuming, want to press the current non-historical conditions, to achieve the page scrolling position record.

In fact, the most important thing is to record the location of scrolling, let the post-save, when the page fallback, let the page scroll to the specified location. But it's time to pay attention to the hook function. Because the keep-alive is used here to cache the page, the first time to get the page scrolling distance and the second fallback to get the page scrolling distance, written in a different hook function.

Here is the prototype diagram: (because this is the pad, the mobile style is a bit problematic)

The above page, there is a wireless loading function, we here how to get the scrolling distance? In which hooks do you get the scrolling height in real time (the content area can be scrolled)? When the Vue component is initialized, created,mounted these hooks are no longer triggered when the page is rendered. We get the height of the page, that is, the height of the box in the content area, and in Vuejs we locate the DOM by using $ref way. In the Vuejs also has the hook function updated is can obtain the $ref height in real-time, when the page DOM updates, will trigger updated this hook function, the specific reference Vuejs official website;

Get the scrolling distance in the updated hook function:

Updated () {      this. $refs. list.scrolltop;      Sessionstorage.setitem (' scroll ', scroll);}

But the updated hook will only be executed once at the first entry, because the page uses keep-alive to cache the page, if not clear, please refer to here, then how to get the scrolling distance, Although the use of keep-alive does not trigger updated this hook function, but will trigger activated, and deactivated these two hook functions. Activated this hook function is to return the page will be loaded, deactivated this hook function, will be triggered before the page jump, then we just get to the page before jumping to scroll distance, and then cache it down.

The deactivated hook function gets the distance to scroll:

deactivated () {      this. $refs. list.scrolltop;      Sessionstorage.setitem (' scroll ', scroll); }

and the updated hook function gets the same way. But we don't need to worry, back off, will not trigger updated this hook function.

At this point, we just need to trigger the activated hook function on the fallback page, and assign a value to the scrolling position. (Note the conversion of the type, save As String, to convert to number)

The distance at which the activated hook function is assigned to scroll:

activated () {      = sessionstorage.getitem (' scroll ');       this. $refs. List.scrolltop = parseint (scroll);}

This is just an attempt to use a non-history mode to get the page scrolling in a cached way. Later write a demo, write down about the Histroy mode, positioning the page scrolling distance.

Vuejs fallback back to the previous scrolling position without using history