1.vue3使用keep-active缓存组件

<div>
        <!-- 多层路由的缓存需要注意  -->
        <router-view v-slot="{Component}">
            <keep-alive include="ListIndex" >
               <component :is="Component" />
            </keep-alive>
        </router-view>
    </div>

2.通过组件内路由守卫，记录离开时滚动条的位置

<script setup>
    import { onBeforeRouteLeave } from 'vue-router';
    import { ref, onActivated, onDeactivated } from 'vue';
    // 路由离开前记录
    const top = ref(0);
    onBeforeRouteLeave((to,from)=>{
        top.value = document.documentElement.scrollTop || document.body.scrollTop; 
    })
</script>

注：不要使用deactivated生命周期，在这个生命周期里组件已经切换了，最后获取的是切换后的页面滚动条位置。

3.利用keep-alive缓存组件的生命周期，激活该组件时滚动到记录的位置

    // keep-alive缓存组件被激活
    onActivated(() => {
        let root = document.documentElement || document.body;
        root.scrollTop = top.value;
    })