vue+element-ui跳转详情页面列表页原来滚动的位置_vue 跳转记录滚动位置-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaowenxue/article/details/126383319

本文详细介绍了如何在Vue.js项目中，通过keep-alive和activated生命周期钩子实现页面返回时保持之前滚动位置的功能。步骤包括在router.js中配置keepAlive为true，在App.vue中设置keep-alive结构，以及在具体页面中监听滚动事件并记录位置，最后在activated钩子中恢复滚动位置。此外，注意样式设置以防止页面自动滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中的样式，因为页面会自动滚动，所以很容易忽略样式