详情页返回列表页当前位置

利用keepAlive

在app.vue中写两个

 <keep-alive>
    <!-- 需要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

在路由里面配置 index.js

{
            path: "/persiondetail",
            name: "persiondetail",
            component: resolve => require(["../views/person/persiondetail"], resolve),
            meta: {
                isLogin: true,
                index: 2,
                keepAlive:false, //不需要缓存的组建
            }
        },
        {
            path: "/persiondetail",
            name: "persiondetail",
            component: resolve => require(["../views/person/persiondetail"], resolve),
            meta: {
                isLogin: true,
                index: 2,
                keepAlive:true ,  需要缓存的组建
            }
        },

上面的是开始 下面是需要在组建中写的 ，
给出现滚动条的盒子加两个属性 ref 和scroll
（一定要找到出现滚动条的的那个盒子，不然没有效果）

<div  style="overflow:auto" ref="lazyRef" @scroll="scroll">
</div>

下面是组建被缓存之后走的
组件中的name值要和router中的name值是一样的

export default {
 name: "person",   这里的name一定要和router中的name值是一样的  
    components: {
    },
    data() {
        return {
            toop:null,
        }
    },
    //组件缓存之后 再次进入组建的走的函数
    activated(){
        //通过$ref获取dom元素
        this.$refs.lazyRef.scrollTop = Number(window.sessionStorage.getItem('top'))
      },
      
    methods: {
        // 获取滚动条与顶端距离
        scroll(event){
            this.toop = event.target.scrollTop
            console.log('scroll', event.target.scrollTop)
          },
    },
    //离开组件时把高度保存到sessionStorage中
    beforeRouteLeave(to,from,next){
        window.sessionStorage.setItem('top',this.toop);
        next()
    },
}

这个是我具体的总结，参考了很多的东西
keepAlive的使用
组件的钩子函数
vue获取滚动条的位置
$nextick的使用