方法一： 利用Keep-Alive和监听器
1.首先在路由中引入需要的模块
{
path: ‘/scrollDemo’,
name: ‘scrollDemo’,
meta: {
keepAlive:true //需要缓存
},
component: resolve=> { require([‘../view/scrollDemo.vue’],
resolve) }
}
2.在App.vue中设置缓存组件
//缓存组件跳转的页面
//非缓存组件跳转页面
3.在页面注册对应的事件
(1). 在data中定义一个初始值 scroll
(2). 在mouted中 ，mouted中的方法代表dom已经加载完毕
window.addEventListener('scroll', this.handleScroll);
(3).methods 用于存放页面函数
handleScroll () {this.scroll = document.documentElement &&document.documentElement.scrollTop
console.log(this.scroll)
}
4.activated 为keep-alive加载时调用
activated() {if(this.scroll > 0){
window.scrollTo(0, this.scroll);this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
}
5.deactivated 页面退出时关闭事件 防止其他页面出现问题
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
方法二：利用beforeRouteLeave和watch
main.js中：
var store = newVuex.Store({ //记得先引入vuex
state: {
recruitScrollY:0},
getters: {
recruitScrollY: state=>state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state, recruitScrollY) {
state.recruitScrollY=recruitScrollY;
}
},
actions: {
},
modules: {}
})
组件中(/flashSaleListX为当前组件，即需要记住滚动条位置的组件)：
methods:{
isTabRoute:function() {if (this.$route.path === '/flashSaleListX') {
let recruitScrollY= this.$store.state.recruitScrollY
document.documentElement.scrollTop=recruitScrollY;
}
}
},
watch: {'$route': 'isTabRoute',
},
beforeRouteLeave(to, from, next) {
let position= document.documentElement && document.documentElement.scrollTop; //记录离开页面时的位置
if (position == null) position = 0
this.$mit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
}
方法三：(适用于方法二获取不到滚动位置)
组件中：
··· 内容···
beforeRouteEnter(to, from, next) {
next(vm=>{
const div1=vm.$refs.div1//记录滚动高度
div1.scrollTop =vm.scroll
})
},
beforeRouteLeave(to, from, next) {
const div1= this.$refs.div1;this.scroll =div1.scrollTop; //data中记得定义变量scroll
next()
}
注：在路由配置中，记住滚动的页面keep-alive需为true
