List

Monitor the scroll event in the list. Every time the value is saved in the component data, when the component is activated, set the scroll bar to the last recorded position again

This component must use keep alive cache, otherwise it can only use state management plug-ins such as vuex to save page location information

<template>

    <div style="height: 200px;border: 2px solid #333;overflow-x: hidden;box-sizing: border-box;" @scroll="scroll">
        <h1>
            List
        </h1>
        <div v-for="i in arr" :key="i" style="height: 200px"> {{i}}</div>

    </div>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                arr: [1, 2, 3, 4, 5],
                pos: 0
            }
        },
        methods: {
            scroll(event) {
                this.pos = event.target.scrollTop
                console.log('scroll', event.target.scrollTop)
            }
        },
        activated() {
            this.$el.scrollTop = this.pos
        },
        beforeRouteEnter: (to, from, next) => {
            // Before rendering the component, the corresponding route is called before confirm.
            // No Yes! Get component instance ` this`
            // Because before the guard executes, the component instance has not been created
            // console.log('before enter', this)
            // let topy = document.body.scrollTop
            //
            // console.log(topy)
            next()
        },
        beforeRouteLeave(to, from, next) {
            // Called when the navigation leaves the corresponding route of the component
            // Can access component instance ` this`
            console.log('route leave')

            // let topy = document.body.scrollTop
            let topy = window.scrollTop
            console.log(topy, this.$el)
            next()

        },
    }
</script>

<style scoped>

</style>

After the scroll bar moves, access other components again, and then return to the same position as the component scroll bar

You can also use route events to assign values only when the route is moved out and activated, which is slightly more efficient than scroll. Note that this has not been created and cannot be used when the beforeRouteEnter method is executed, so you can only set the scroll bar position when it is activated

  activated() {
            this.$el.scrollTop = this.pos
        },
        beforeRouteEnter: (to, from, next) => {
            // Before rendering the component, the corresponding route is called before confirm.
            // No Yes! Get component instance ` this`
            // Because before the guard executes, the component instance has not been created
            // console.log('before enter', this)
            // let topy = document.body.scrollTop
            //
            // console.log(topy)
            next()
        },
        beforeRouteLeave(to, from, next) {
            // Called when the navigation leaves the corresponding route of the component
            // Can access component instance ` this`
            console.log('route leave')

            // let topy = document.body.scrollTop
            this.pos = this.$el.scrollTop
            console.log(' this.pos ',  this.pos )
            next()

        },