要解决问题如下图所示:
解决思路:
当前页面加载完之后(mounted),添加对滚动(scroll)事件的监听;
编写获取当前页面滚动高度的方法,并且将获取的当前页面滚动高度进行本地存储(localStorage);
当切换不同子菜单项时候,获取本地存储里面存储的当前页面滚动高度,并且让其滚动到当前位置;
当前页面销毁时(destroyed),移除对滚动事件的监听,并且清空本地存储。
具体解决代码如下:
mounted() {
window.addEventListener('scroll', this.getHeight) // 添加对于滚动事件的监听
this.getMsg(this.index)
},
destroyed() {
localStorage.clear()// 清除本地存储里面的数据
window.removeEventListener('scroll', this.getHeight) // 移除对于滚动事件的监听
},
methods: {
getMsg(msg) {
this.index = msg
document.documentElement.scrollTop = localStorage.getItem('scrollTop') // 让页面滚动到点击之前菜单项的位置
},
getHeight() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.scrollTop = scrollTop
localStorage.setItem('scrollTop', this.scrollTop) // 本地存储一下当前页面滚动的位置
}
}