解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。

该路由已经使用了缓存的前提下

<keep-alive>
    <router-view></router-view>
</keep-alive>

当页面跳转，点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了，因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话，滚动条不是页面级别的，并没有被记录下来，但是该组件又没有发生改变，所以封装个组件记录滚动条位置，页面发生改变就设置会以前的位置就行了。

自定义组件

<template>
<div 
    class="scroll_container"
    ref="ScrollElCp"
    :style="{
        height:height,
        width:width,
    }">
    <slot></slot>
</div>
</template>
<script>
//滚动容器组件（解决页面切换时不记录组件滚东条的情况）
export default {
    name: 'ScrollElCp',
    props:{
        height:String,  //高度
        width:String,  //宽度
    },
    data() {
        return {
            scrollTop:0,
        }
    },
    watch:{
        $route(){
            const ScrollElCp = this.$refs.ScrollElCp;
            if(!ScrollElCp) return;
            ScrollElCp.scrollTop = this.scrollTop;
        },
    },
    mounted(){
        const ScrollElCp = this.$refs.ScrollElCp;
        ScrollElCp.addEventListener('scroll',()=>{
            this.scrollTop = ScrollElCp.scrollTop;
        });
    },
}
</script>
<style scoped lang="scss">
.scroll_container {
    overflow: scroll;
}
</style>

使用方法

<template>
<div>
    <ScrollElCp
        height="100px"
        width="100px">
        <h1
            v-for="(item,index) in 100"
            :key="index">
            {{item}}
        </h1>
    </ScrollElCp>
</div>
</template>
<script>
import ScrollElCp from "@/components/public/ScrollEl";
export default {
    components: {
        ScrollElCp,
    },
}
</script>
<style scoped lang="scss">

</style>