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)文章
這篇文章主要介紹了關(guān)于vue-color-顏色選擇器插件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue-cli創(chuàng)建的項目的目錄結(jié)構(gòu)及說明介紹
下面小編就為大家分享一篇基于vue-cli創(chuàng)建的項目的目錄結(jié)構(gòu)及說明介紹，具有很好的參考價值，希望對大家有所幫助2017-11-11
Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例
這篇文章主要給大家詳細介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽，使得Vue的開發(fā)更加絲滑，文中通過代碼示例給大家介紹的非常詳細，感興趣的同學(xué)跟著小編一起來學(xué)習吧2023-07-07
Vue的watch偵聽器格式有兩種：方法格式和對象格式的偵聽器，這篇文章主要介紹了Vue watch 偵聽對象屬性相關(guān)知識,需要的朋友可以參考下2023-04-04
VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue動態(tài)路由實現(xiàn)多級嵌套面包屑的思路與方法
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法
這篇文章主要介紹了在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-06-06
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08