这几天因为这个问题,绞尽脑汁啊。
我的项目是【 div元素内部的滚动条滚动,而不是body 】,所以解决这个问题,首先必须清楚自己的项目滚动条到底是谁的!!!!
话不多说,代码送上。
一: 首先为需要保留滚动条的组件开启缓存
export default new Router({
routes: [
{
path: '/',
name: 'Home',
meta:{
keepAlive: true //为需要保留滚动条的组件开启缓存
},
component:resolve => require(['@/views/home.vue'],resolve),
},
{
path: '/words/:id',
name: 'Words',
component: Words,
meta:{
keepAlive: false
}
}
],
})
二: 在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>
三: 在需要缓存滚动条的组件页面加入下面的代码
beforeRouteLeave (to, from, next) {
this.scrollTop = document.querySelector('.wrap').scrollTop
//保存滚动条元素div的scrollTop值
next()
},
beforeRouteEnter (to, from, next) {
next(vm => {
document.querySelector('.wrap').scrollTop = vm.scrollTop
// 为div元素重新设置保存的scrollTop值
})
},
大功告成,亲测有效,有其他问题的同学可以浏览讨论。。。
转发请附带原地址!!!