在vue单页面应用中，可以通过在router 配置中添加 keepAlive 来keepAlive页面，但是这样会导致页面在切换时，页面位置会回到顶部，这样用户体验不好，所以需要保持页面位置。

解决方案

1. 在router配置中添加keepAlive
2. 在需要保持页面位置的组件中添加scrollTop属性
3. 在组件的activated钩子函数中获取scrollTop，并恢复滚动位置
4. 在组件的beforeRouteLeave钩子函数中设置scrollTop

   代码示例

   // router配置
   {
     path: '/list',
     name: 'list',
     component: List,
     meta: {
       keepAlive: true
     }     
   }
   
   // List组件
   export default {
     data() {
       return {
         scrollTop: 0
       }
     },
     activated() {
       // 恢复滚动位置
       this.$nextTick(() => {
           const pages = document.querySelector('.page');
           if (pages) {
               pages.scrollTop = this.scrollTop;
           }
       });
     },
       beforeRouteLeave(to, from, next) {
           // 保留滚动位置
           this.scrollTop = document.querySelector('.page')?.scrollTop;
           next();
       },
   }