Using keepAlive

stay app.vue Two in Chinese

 <keep-alive>
    <! -- view components that need to be cached -- >
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<! -- view components that do not require caching -- >
<router-view v-if="!$route.meta.keepAlive">
</router-view>

Configure in routing index.js

{
            path: "/persiondetail",
            name: "persiondetail",
            component: resolve => require(["../views/person/persiondetail"], resolve),
            meta: {
                isLogin: true,
                index: 2,
                keepAlive:false, //Build without caching
            }
        },
        {
            path: "/persiondetail",
            name: "persiondetail",
            component: resolve => require(["../views/person/persiondetail"], resolve),
            meta: {
                isLogin: true,
                index: 2,
                keepAlive:true ,  Build that requires caching
            }
        },

The above is the beginning, and the following needs to be written in the build,
Add two attributes ref and scroll to the box where the scroll bar appears
(be sure to find the box where the scroll bar appears, otherwise it will not work.)

<div  style="overflow:auto" ref="lazyRef" @scroll="scroll">
</div>

Here's how the build is cached
The name value in the component should be the same as the name value in router

export default {
 name: "person",   there name Be sure to router Medium name The values are the same  
    components: {
    },
    data() {
        return {
            toop:null,
        }
    },
    //After the component cache, it enters the built function again
    activated(){
        //Get dom elements through $ref
        this.$refs.lazyRef.scrollTop = Number(window.sessionStorage.getItem('top'))
      },
      
    methods: {
        // Gets the distance between the scroll bar and the top
        scroll(event){
            this.toop = event.target.scrollTop
            console.log('scroll', event.target.scrollTop)
          },
    },
    //Save height to sessionStorage when leaving component
    beforeRouteLeave(to,from,next){
        window.sessionStorage.setItem('top',this.toop);
        next()
    },
}

This is my specific summary, referring to a lot of things
Use of keepAlive
Hook function of component
vue gets the position of the scroll bar
Use of $nextick