vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)
更新時間：2020年07月21日 08:42:41 作者：胖魯
這篇文章主要介紹了vue 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
頁面做tab切換，由于組件每一次切換都會重新實例化組件，我們想要頁面不論怎么切換都仍然保持tab里面的內(nèi)容不會刷新，減少頁面重新渲染以及減少請求
實現(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è)置頁面是否需要緩存來實現(xiàn)
router-view嵌套多層的話，可能要設(shè)置多層，然后通過beforeRouteLeave監(jiān)聽路由離開，設(shè)置是否緩存
//從其他頁面跳轉(zhuǎn)不需要緩存頁面 從詳情頁面回來則需要緩存
補充知識：vue 動態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染
通過keep-alive 保留數(shù)據(jù)值 填寫數(shù)據(jù)時切換到其他頁面，后返回當前頁數(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ù)據(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 實現(xiàn)tab切換保持數(shù)據(jù)狀態(tài)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
文章展示了基于Vue封裝的標準漏斗圖的代碼,包括權(quán)重算法、滾輪監(jiān)聽和點擊示例功能,旨在提供實用的圖表展示技巧2025-02-02
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+element-ui 實現(xiàn)表格的分頁功能示例
這篇文章主要介紹了Vue+element-ui 實現(xiàn)表格的分頁功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中渲染對象中屬性時顯示未定義的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問題,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端多格輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
VScode中配置ESlint+Prettier詳細步驟(附圖文介紹)
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細步驟,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12