vue 實(shí)現(xiàn)tab切換保持?jǐn)?shù)據(jù)狀態(tài)
頁面做tab切換，由于組件每一次切換都會重新實(shí)例化組件，我們想要頁面不論怎么切換都仍然保持tab里面的內(nèi)容不會刷新，減少頁面重新渲染以及減少請求
實(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>
列表頁面跳轉(zhuǎn)詳情 ，列表頁面保持上一次操作狀態(tài)
通過是否加載router-view 和路由元meta設(shè)置頁面是否需要緩存來實(shí)現(xiàn)
router-view嵌套多層的話，可能要設(shè)置多層，然后通過beforeRouteLeave監(jiān)聽路由離開，設(shè)置是否緩存
//從其他頁面跳轉(zhuǎn)不需要緩存頁面 從詳情頁面回來則需要緩存
補(bǔ)充知識：vue 動態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染
通過keep-alive 保留數(shù)據(jù)值 填寫數(shù)據(jù)時(shí)切換到其他頁面，后返回當(dāng)前頁數(shù)據(jù)保留 ，主要用于保留組件狀態(tài)或避免重新渲染
<!--動態(tài)組件-component使用--> <div class="app"> <ul> <li @click="currView='home'">首頁</li> <li @click="currView='abount'">關(guān)于我們</li> </ul> <!--通過keep-alive 保留數(shù)據(jù)值 填寫數(shù)據(jù)時(shí)切換到其他頁面，后返回當(dāng)前頁數(shù)據(jù)保留--> <keep-alive> <component :is="currView"></component> </keep-alive> </div>
<script type="text/x-Template" id="homeTemp"> <h2>首頁數(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)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue Tab切換以及緩存頁面處理的幾種方式
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- vue使用動態(tài)組件實(shí)現(xiàn)TAB切換效果
- vue組件開發(fā)之tab切換組件使用詳解
- Vue解決echart在element的tab切換時(shí)顯示不正確問題
- vue tab滾動到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
- vue tab切換,解決echartst圖表寬度只有100px的問題
- vue vantUI tab切換時(shí) list組件不觸發(fā)load事件的問題及解決方法
- vue Tab切換以及緩存頁面處理的幾種方式
相關(guān)文章
這篇文章主要介紹了關(guān)于vue-color-顏色選擇器插件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)及說明介紹，具有很好的參考價(jià)值，希望對大家有所幫助2017-11-11
Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽，使得Vue的開發(fā)更加絲滑，文中通過代碼示例給大家介紹的非常詳細(xì)，感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧2023-07-07
Vue的watch偵聽器格式有兩種：方法格式和對象格式的偵聽器，這篇文章主要介紹了Vue watch 偵聽對象屬性相關(guān)知識,需要的朋友可以參考下2023-04-04
VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue動態(tài)路由實(shí)現(xiàn)多級嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實(shí)現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08