解决跳转后返回列表页 滚动条回到顶部

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

 <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

问题：web端 元素使用了overflow-y: scroll; 跳转详情页返回列表滚动条回到顶部 未定位到上次的滚动位置

首先我们要了解 元素使用了overflow-y: scroll; 并设置了宽高  这样的话 滚动条就不是页面级得了

所有没有改变就没有记录滚动条位置

在设置overflow-y: scroll;的元素添加ref   监听路由变化  监听滚动事件

<template>
  <div @scroll="handleScroll" ref="Scroll"></div>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  watch: {
    $route() {  // 监听路由变化
      const Scroll = this.$refs.Scroll;
      if (!Scroll) return;
      Scroll.scrollTop = this.scrollTop;
    },
  },
  methods:{
    handleScroll(event){   //滚动事件  可以用了判断加载分页
      console.log(event.target.scrollTop;);
    }
  }
  mounted() {
    const Scroll= this.$refs.Scroll;
    Scroll.addEventListener("scroll", () => { //监听滚动事件
      this.scrollTop = Scroll.scrollTop;
    });
  },
</script>

<style scoped lang="scss">
.project_library {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  width: 50%;
  margin: 0 auto;
  padding: 0 20px;
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none; 
}
</style>

这样就OK了