vue keep-alive 實現詳情返回列表保留頁面數據

實現功能

1. 詳情頁返回列表頁，列表頁保留上次瀏覽位置
2. 其它頁面進入到列表表，列表頁刷新
3. 當詳情頁有數據改變時，列表頁也要更新該條數據

實現思路

1. 用keep-alive保留列表頁面數據
2. activated鉤子函數來更新數據
3. 利用路由守衛判斷是否從詳情頁返回來決定是否更新數據
4. 當詳情數據改變時，返回列表後利用vm.$set(vm.list,index,newValue)或vm.list.splice(i,1)進行更新

具體實現

1. 設置keepalive

App.vue
<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

router/index.js
{
  path: ...,
  name: ...,
  meta: {
    title: '列表',
    keepAlive: true,
    canKeep:false
  },
  component: ...
},
複製代碼

2. 在列表頁路由守衛判斷是否保留數據,只在詳情返回作保留

beforeRouteEnter(to, from, next) {
if (from.name == "detail") {
  to.meta.canKeep = true;
} else {
  to.meta.canKeep = false;
}
next();
},
複製代碼

3. 在activated中更新數據

activated() {
    if (!this.$route.meta.canKeep) {
    // 在這裏發送請求，刷新數據
    }
},
複製代碼

4. 列表更新單條數據

activated() {
    // 刷新數據
    if (!this.$route.meta.canKeep) {
    ...
      window.scrollTo(0, 1);
    } else {
      // 不刷新數據 但詳情頁數據有更改時
        this.showPackageList.forEach((item,idx) => {
        if(..){
           item.looked = true;
          // 更新某一條數據
          this.$set(this.showPackageList, idx, item);           
        }
      })
    }
    this.rollingLoad();
  },
複製代碼

遇到問題

從詳情1返回列表時正常，進入其它頁面，返回，列表數據更新，進入詳情2，返回列表，此時列表會自動定位到從列表進入詳情1時的位置，而不是進入詳情2前的位置。

緣由

列表只作了數據刷新，位置信息依舊保留，當列表刷新後，若是頁面觸發過滾動，位置信息獲得更新，再次返回則正常，無觸發滾動則再次返回會回到第一次定位的位置

解決方法

在列表數據更新後，手動觸發滾動

activated() {
    if (!this.$route.meta.canKeep) {
    // 刷新數據
    // 重置頁面位置
      window.scrollTo(0,1)
    }
},
複製代碼