快捷導航

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封裝的標準漏斗圖教程
文章展示了基于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中渲染對象中屬性時顯示未定義的解決
這篇文章主要介紹了vue中渲染對象中屬性時顯示未定義的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3使用ref 獲取不到子組件屬性問題的解決辦法
父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問題,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下
2024-06-06
vue實現(xiàn)移動端多格輸入框
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端多格輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
基于vue實現(xiàn)一個禪道主頁拖拽效果
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下
2019-05-05
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
vue使用ECharts實現(xiàn)折線圖和餅圖
這篇文章主要為大家詳細介紹了vue使用ECharts實現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
VScode中配置ESlint+Prettier詳細步驟(附圖文介紹)
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細步驟,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-12-12