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>