vue实现返回列表页面仍然在之前的位置
1、使用Vue中的标签包裹列表组件。
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
因为我们在加载数据时一般都是在created生命周期函数中加载,所以只要重新回到列表页面就会触发created生命周期函数中的加载数据方法。
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,这样在重新回到列表页面是救不会重新加载数据了。
2、在列表组件的mounted生命周期函数中记录滚动的距离
<template>
<div class="article-list" ref="articleRef"> //给根节点绑定ref属性,便于原生的js操作
...
</div>
</template>
<script>
export default {
data () {
return {
scrollTop: 0 //在data属性中记录滚动的距离
}
},
methods: {},
mounted () {
const article = this.$refs.articleRef //获取到根节点
//绑定onscroll事件,只要滚动鼠标就会触发该事件,记录滚动的值
article.addEventListener('scroll', () => {
this.scrollTop = article.scrollTop
console.log(article.scrollTop)
})
}
}
</script>
3、在activated生命周期钩子函数中设置滚动的距离。
当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated表示进入到该组件时触发的函数,deactivated表示离开该组件时触发的函数
详情参考Vue文档 https://cn.vuejs.org/v2/api/#keep-alive
activated () {
this.$refs.articleRef.scrollTop = this.scrollTop
}