vue滚动列表，从详情返回不刷新，回到滚动位置

网上一堆文章，太难找到一个真正有用的....但大体思路一致。

步骤1.router.js中的跳转页面增加keepAlive，这没问题

path: '/test',
  name: 'test',
  component: () => import('@/views/test.vue'),
  meta: {
    title: 'xxx',
    keepAlive: true
  }
},

步骤2（错误❌）：加scrollBehavior方法，这可能是对的，但我的项目比较奇怪，用不了这个

 scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }

步骤2（正确✔）：在另一篇文章找到的答案是不需要scrollBehavior，而是加beforeEach

具体加在哪里呢，如果你项目能找到  xxx router = new Router(); 那就加在那下面，并且是用router.beforeEach .......

router.beforeEach((to, from, next) => {  
  if (from.meta.keepAlive) {
    const $wrapper = document.querySelector('.app-wrapper'); // 列表的外层容器 注意找到滚动的盒子
    const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
    console.log('scrollTop=', scrollTop)
    from.meta.scrollTop = scrollTop;
  }
  next();
});

而我的项目没有这个xxx router = new Router(); 路由是放在router.js，我试了下，加在router.js后面是可以的

router.js

 export default {
    routes: [
        {
            path: "/", component: () => import("./xx/index")
        },
],
   beforeEach(to, from, next){
    if (from.meta.keepAlive) {
        const $wrapper = document.querySelector('.app-wrapper'); // 列表的外层容器 注意找到滚动的盒子
        const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
        console.log('scrollTop=', scrollTop)
        from.meta.scrollTop = scrollTop;
    }
    next();
}
};

步骤3：在你的app.vue ，找到router-view的地方，替换一下，加上keep-alive,我的项目比较奇怪，不在app.vue，而是在index.vue

<template>
    <div>
        <keep-alive>
            <router-view v-if='$route.meta.keepAlive'/>
        </keep-alive>
        <router-view  v-if='!$route.meta.keepAlive'/>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        }
    }
</script>
    

 步骤4：给列表页面，也就是需要跳转到详情的页面加上class app-wrapper

<template>
    <div class="app-wrapper" >

步骤5：接着在列表页面再加上两个方法 activated和beforeRouteLeave ，与mounted同级

activated 的作用是可以回到滚动位置；

beforeRouteLeave 的作用是可以加判断，只有详情回来的页面需要加缓存，其他方式进来就还是重新加载数据，不缓存。

        activated(){
            const scrollTop = this.$route.meta.scrollTop;
            const $wrapper = document.querySelector('.app-wrapper');
            if (scrollTop && $wrapper) {
                $wrapper.scrollTop = scrollTop;
            }
        },
        beforeRouteLeave (to, from, next) {
            if (to.path === '/toDetails') {
                from.meta.keepAlive = true
            } else {
                from.meta.keepAlive = false
            }
            next()
        },