vue 返回记住滚动条位置
Posted _error
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 返回记住滚动条位置相关的知识,希望对你有一定的参考价值。
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
以上是关于vue 返回记住滚动条位置的主要内容,如果未能解决你的问题,请参考以下文章
vue keep-alive结合scrollTop返回上一页时记忆并且回到原来的滚动位置