vue 返回记住滚动条位置

最新推荐文章于 2025-06-18 11:13:40 发布

weixin_30752699

最新推荐文章于 2025-06-18 11:13:40 发布

阅读量920

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/_error/p/10118257.html

本文介绍了一种在Vue项目中实现返回上一页并保持滚动位置的方法。通过在首页组件使用beforeRouteLeave获取并记录滚动高度，再利用activated在再次进入时设置高度，实现了用户体验的优化。

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

vue 项目返回上一页，滚动到离开时的位置，网上能找到不少方法，以下尝试一种。

例如，首页有个列表，点击列表进入二级页面，返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = 'Home' 的组件进行缓存

<keep-alive include='Home'>
  <router-view/>
</keep-alive>

然后，在首页的 Home 组件内，使用 beforeRouteLeave ，组件内的路由导航守卫，路由离开前，获取滚动高度，并记录在 data 中，当再次进入首页，判断是否存在这个滚动高度，若存在，则设置高度，否则置为 0

data:{
    homeTop : 0,
},

activated(){
    // do something
    console.log('activated home')
    document.getElementById('app').scrollTop = this.homeTop || 0
},
beforeRouteLeave (to, from, next) {
    // console.log('leave')
    let app = document.getElementById('app')
    this.homeTop = app.scrollTop || 0
    next()
},

end

转载于:https://www.cnblogs.com/_error/p/10118257.html