可参考:https://blog.csdn.net/kill_fish/article/details/115211381
方法一(不封装):
// 列表页
activated() {
let scrollTop = this.$route.meta.scrollTop;
let classElement = document.querySelector('.box'); // .box 为滚动条所处区域(容器)的类名
// 如果保留了分页等信息,可以从路由中获取
classElement.scrollTop = scrollTop && classElement ? scrollTop : 0;
},
beforeRouteLeave(to, from, next) {
let classElement = document.querySelector('.box') ; // .box 为滚动条所处区域(容器)的类名
let scrollTop = classElement ? classElement .scrollTop : 0
// 这里还可以保留分页等信息
from.meta.scrollTop = scrollTop;
next()
},
方法二(封装):
//main.js (封装到vue原型上)
Vue.prototype.$saveScroll= function(className) {
// 此处的this指向 调用$saveScroll方法的vue组件
let that = this
if (document.querySelector(className)) {
//相当于 在调用$saveScroll方法的vue组件上 声明了一个scrollTop变量
that.scrollTop = document.querySelector(
className
).scrollTop
}
}
Vue.prototype.$getScroll= function(className) {
let that = this
if (document.querySelector(className)) {
document.querySelector(
className
).scrollTop = that.scrollTop || 0 //因为没有销毁组件,所以之前声明的scrollTop变量依然存在
}
}
// 在列表页使用
activated() {
this.$getScroll(".box")
},
beforeRouteLeave(to, from, next) {
this.$saveScroll(".box")
next()
},