1. Service scenarios

There is now A, B, two pages, do some operation in B page, for example by entering search terms to search out the relevant data, and then click A data, jump to A details page, click the back button on A page, page B remains before leaving state, but from B page to A page, A page has been the latest page.

2. Specific practices

Keep alive – use

** Note: ** For this example, I cache both page A and page B. In real development, you can just choose your own component to cache, but I’m just demonstrating this example.

<template> <div id="app"> <nav> <router-link to="/">to A page</router-link> <router-link to="/about">to B page</router-link> </nav> <! --> <keep-alive> <router-view /> </keep-alive> </div> </template>Copy the code
keep-aliveLife cycle of
  • First entry:
    1. created > mounted > activated
    2. Trigger after exitdeactivated
  • Enter again:
    1. Only triggersactivated
  • To leave again:
    1. Trigger after exitdeactivated

With the keep-alive hook function in mind, we need to save the current location when we leave the B page. You don’t have to think about it, you have to listen for the Scroll event, when do you listen? The Activated hook function is the most appropriate way to do this, since it is possible to scroll the page every time you enter page B. The following

<script> export default { name: 'AboutView', components: {}, data() { return { scrollTop: }}, // listen for the Scroll event when entering the current component and record the page position to the data object scrollTop. // Return to the last time you left the page according to the saved scrollTop value. ') document. The documentElement. ScrollTop = this. ScrollTop window. The addEventListener (' scroll ', enclosing handlerScroll)}, / / left page, Remove the scroll listener deactivated() {console.log('About deactivated... ') window.removeEventListener('scroll', this.handlerScroll) }, methods: { handlerScroll() { this.scrollTop = document.documentElement.scrollTop }, }, } </script>Copy the code

As shown above, the current location is recorded when you leave page B, and when you re-enter, based on previously saved data. Return to the position you left.

3. What points can be optimized?

Note that we registered scroll events above, which are triggered at a high frequency and are usually restricted by anti-shake or throttling.

<script> const _ = require('lodash') export default { name: 'AboutView', components: {}, data() { return { scrollTop: ", removeFlag: null,}}, // listen for the scroll event when entering the current component and record the page position to the data object scrollTop. // Return to the last time you left the page according to the saved scrollTop value. ') document.documentElement.scrollTop = this.scrollTop window.addEventListener('scroll', Enclosing handlerDebounceScroll ())}, / / left page, remove the scroll event listeners deactivated () {the console. The log (' About deactivated... ') window.removeEventListener('scroll', this.handlerDebounceScroll()) }, methods: { handlerScroll() { this.scrollTop = document.documentElement.scrollTop }, HandlerDebounceScroll (delay = 500) {// Remove the event id if (! this.removeFlag) { this.removeFlag = _.debounce(this.handlerScroll, delay) } return this.removeFlag }, }, } </script>Copy the code