vue实现返回列表页面仍然在之前的位置

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
  }