實現功能

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

實現思路

用keep-alive保留列表頁面數據
activated鉤子函數來更新數據
利用路由守衛判斷是否從詳情頁返回來決定是否更新數據
當詳情數據改變時，返回列表后利用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)
    }
},

以上就是keep-alive 實現詳情返回列表保留頁面數據。。。。

總結

以上是生活随笔為你收集整理的vue keep-alive 实现详情返回列表保留页面数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。