vue+element-ui跳转详情页面列表页原来滚动的位置

1.需求要求pc端el项目从性情页面返回列表页面固定到原来跳转前滚动的位置
2.vue要使用keep-alive+activated结合使用
3.现在router.js中配置router要把keepAlive置为true
如图

4.在App.vue页面中写

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

5.在要用到的index.vue页面中写

<template>
  <!-- 综合查询 -->
  <div class="basiclevel" ref="basiclevelList">
  //这里面是你写的页面代码
</div>
</template>

6.使用activated()中获取位置

//获取当前记录的位置
  // 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
  activated() {
    this.$refs.basiclevelList.scrollTop = +localStorage.getItem("scrollTop");
  },

7.在mounted()中记录滚动的位置

this.$refs.basiclevelList.onscroll = function (e) {
      // 记录滚动位置
      // console.log('scroll', e.target.scrollTop)
      localStorage.setItem("scrollTop", e.target.scrollTop);
  };

8.最重要的不要忘记css中的样式，因为页面会自动滚动，所以很容易忽略样式

.basiclevel {
  overflow-x: scroll;
 }

9.这样就可以使用啦。