vue 列表进入详情后，返回保持原位置

网上有很多的相关说明，大概思路都是keep-alive、router配置哪些页面需要缓存、进入详情时保存滚动条位置存在vuex中

自己的需求：

1.进入详情返回后，列表保持原位置

2.多个列表多个详情

3.列表使用mint的InfiniteScroll滚动加载下一页。

遇到的问题：

1.keep-alive会使多个列表缓存后，下拉加载触发多个

2.多个列表多个详情想写在统一的地方

使用方法

1.keep-alive include来控制缓存哪个页面

2.app.vue 中监控路由变化，控制是否缓存数据以及保存滚动条位置

3.利用组件内activated,deactivated生命周期来控制该组件是否为当前正在显示的组件

4.由于自己只想在当前列表进入详情时缓存数据，因此利用include只缓存当前列表

以下为app.vue中代码

<keep-alive :include="include">
     <router-view/>
</keep-alive>　　

watch: {
    $route: {
      // immediate: true,
      deep: true,
      handler: function (val, oldVal) {
        let list = ['merchMonitor','merchAnchorList','merchList', 'brandList', 'LiveList', 'VideoList', 'IndustryList'] //所有列表页
        let detail = ['VideoDetailOutPut', 'douyinDetail', 'goodsDetail', 'Detail', 'merchDetail', 'brandDetail', 'TycoonDetail', 'IndustryDetail', 'liveShare'] //所有详情页
        if(list.indexOf(val.name) != -1){ //始终只缓存当前列表
          this.include = []
          this.include.push(val.name)
        }
        if(list.indexOf(oldVal.name) != -1 && detail.indexOf(val.name) != -1){ //如果从列表进入详情页保存滚动条位置
          this.listScrollTop = this.$refs.con.scrollTop;
        }
        if(list.indexOf(val.name) != -1 && detail.indexOf(oldVal.name) != -1 && this.listScrollTop){//如果详情页返回列表，恢复滚动条位置
           let timeout = setTimeout(()=>{ //由于这时组件可能还没有显示完成，所以滚动条会有误差，偷懒使用了定时器，还是数据存在vuex，监听组件生命周期比较更准确哈
             this.$refs.con.scrollTop = this.listScrollTop;
             clearTimeout(timeout);
           }, 10)
        } else {
          this.$refs.con.scrollTop = 0;
        }

  },　

//以下为列表组件内，deactivated时配置false，避免已经进入详情页后滚动触发列表的滚动加载数据
activated(){
　　this.isCurrentPage = true;
},
deactivated(){
　　this.isCurrentPage = false;
},
computed: {
loadingStatus(){ //配合loading一起
　　return this.loading || !this.isCurrentPage;
}
},

　

<ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loadingStatus"
          infinite-scroll-distance="30"
          infinite-scroll-immediate-check="false"
          >
</ul>