Vue keep-alive實踐總結
<keep-alive>
是Vue的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM。
<keep-alive>
包裹動態元件時,會快取不活動的元件例項,而不是銷燬它們。和 <transition>
相似, <keep-alive>
是一個抽象元件:它自身不會渲染一個 DOM 元素,也不會出現在父元件鏈中。
- include: 字串或正則表示式。只有匹配的元件會被快取。
- exclude: 字串或正則表示式。任何匹配的元件都不會被快取。
經過我這次的專案實踐,總結出了keep-alive的頁面是一直都會快取起來的,直到你重新資料渲染之後去改變快取的狀態。
在看文章的時候可以到官網瞭解一下keep-alive額
情況一:只有從詳情頁跳轉到列表頁是,列表頁是上一次快取下來的;其頁面跳轉到列表頁,列表頁重新獲取資料渲染(初始化)
在App.vue中(所有這個 reportingRecord.vue頁面已經是會快取起來了 )
<keep-alive :include="['reportingRecord']"> <router-view></router-view> </keep-alive>
在配置路由引數
{ path: '/reportingRecord', name: 'reportingRecord', meta: { keepAlive: true, //用於控制是否初始化頁面,true:初始化頁面,false:使用快取頁面 }, component: reportingRecord },
在reportingRecord.vue(列表頁)
activated(){ if(this.$route.meta.keepAlive){ this.reportingRecord();//當時true的時候,初始化資料 } }, beforeRouteLeave(to, from, next) { // 離開路由之前取消本頁面的快取 if (to.path == '/reportingRecordInfo') { this.$route.meta.keepAlive = false; //當從reportingRecordInfo.vue頁面跳轉回來的時候,不要去執行初始化資料的this.reportingRecord()方法 }else{ this.$route.meta.keepAlive = true; } next(); },
情況二:子路由之間的切換,和詳情跳轉到列表頁時,列表頁不初始化資料;其他頁面跳轉到列表頁再進行初始化資料(原理,思路同上,建議看懂情況一先)
在App中
<keep-alive :include="['rechargeOrder']"> <router-view></router-view> </keep-alive>
在配置路由引數
{ path: '/rechargeOrder', name: 'rechargeOrder', component: rechargeOrder, redirect: '/noPayPrice', children: [{ path: '/payPrice', name: 'payPrice', component: payPrice }, { path: '/noPayPrice', name: 'noPayPrice', component: noPayPrice } ] },
在vuex儲存狀態
在其中一個子路由頁面
computed:{ ...mapState(['keepAlive1','keepAlive2']), }, activated() { console.log('stateka2', this.keepAlive1); if (this.keepAlive1) { this.noPayLists(); } }, beforeRouteLeave (to, from, next) { if (to.path != '/index') { this.cacheNoPay(false) console.log('1111',this.keepAlive1); }else{ this.cacheNoPay(true) this.cachePay(true) } next() }, methods:{ ...mapMutations(['cachePay','cacheNoPay']), }
另一個子路由頁面同理
computed:{ ...mapState(['keepAlive1','keepAlive2']), }, activated() { //初始化資料 // console.log('stateka1', this.keepAlive1); if (this.keepAlive2) { this.payLists(); } }, beforeRouteLeave (to, from, next) { if (to.path != '/index') { this.cachePay(false) }else{ this.cacheNoPay(true) this.cachePay(true) } next() }, methods:{ ...mapMutations(['cachePay','cacheNoPay']), }
總之就是在keep-alive標籤中加入你要快取的頁面name,然後控制一個引數判斷是否需要重新初始化