頁(yè)面做tab切換，由于組件每一次切換都會(huì)重新實(shí)例化組件，我們想要頁(yè)面不論怎么切換都仍然保持tab里面的內(nèi)容不會(huì)刷新，減少頁(yè)面重新渲染以及減少請(qǐng)求

實(shí)現(xiàn)方法：使用<keep-alive></keep-alive>包裹組件

<el-tabs v-model='activeName' @tab-click='handleClick'> <el-tab-pane label='記錄'> <keep-alive> <child1 v-if='isChildUpdate'></child1> </keep-alive> </el-tab-pane></el-tabs>

列表頁(yè)面跳轉(zhuǎn)詳情 ，列表頁(yè)面保持上一次操作狀態(tài)

通過(guò)是否加載router-view 和路由元meta設(shè)置頁(yè)面是否需要緩存來(lái)實(shí)現(xiàn)

router-view嵌套多層的話，可能要設(shè)置多層，然后通過(guò)beforeRouteLeave監(jiān)聽(tīng)路由離開(kāi)，設(shè)置是否緩存

//從其他頁(yè)面跳轉(zhuǎn)不需要緩存頁(yè)面 從詳情頁(yè)面回來(lái)則需要緩存

補(bǔ)充知識(shí)：vue 動(dòng)態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染

通過(guò)keep-alive 保留數(shù)據(jù)值 填寫(xiě)數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留 ，主要用于保留組件狀態(tài)或避免重新渲染

<!--動(dòng)態(tài)組件-component使用--> <div class='app'> <ul> <li @click='currView=’home’'>首頁(yè)</li> <li @click='currView=’abount’'>關(guān)于我們</li> </ul> <!--通過(guò)keep-alive 保留數(shù)據(jù)值 填寫(xiě)數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留--> <keep-alive> <component :is='currView'></component> </keep-alive> </div>

<script type='text/x-Template' id='homeTemp'> <h2>首頁(yè)數(shù)據(jù)</h2></script><script type='text/x-Template' id='abountTemp'> <h2>關(guān)于我們數(shù)據(jù)<input type='text'/></h2></script>

<script type='text/javascript'> var vm=new Vue({ el:’.app’, data:{ currView:'home' }, components:{ 'home':{ template:'#homeTemp' }, 'abount':{ template:'#abountTemp' } } }); </script>

以上這篇vue 實(shí)現(xiàn)tab切換保持?jǐn)?shù)據(jù)狀態(tài)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。