首先给占位符加一层缓存
<keep-alive include="Home">
<router-view></router-view>
</keep-alive>
在路由上加一个源信息meta,记录滚动条的top值
routes: [
{ path: '/', component: Home, meta: { isRecord: true, top: 0 } },
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: to.meta.top || 0 }
}
}
给页面添加事件监听
import _ from 'lodash'
let fn = null
created() {
this.initArticleList()
},
activated() {
fn = this.recordTopHandler()
window.addEventListener('scroll', fn)
},
deactivated() {
window.removeEventListener('scroll', fn)
},
methods:{
recordTopHandler() {
return _.debounce(
() => {
this.$route.meta.top = window.scrollY
},
50,
{ trailing: true }
)
}
}