頁面做tab切換，由於元件每一次切換都會重新例項化元件，我們想要頁面不論怎麼切換都仍然保持tab裡面的內容不會重新整理，減少頁面重新渲染以及減少請求

實現方法：使用<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>

列表頁面跳轉詳情 ，列表頁面保持上一次操作狀態

通過是否載入router-view 和路由元meta設定頁面是否需要快取來實現

router-view巢狀多層的話，可能要設定多層，然後通過beforeRouteLeave監聽路由離開，設定是否快取

//從其他頁面跳轉不需要快取頁面 從詳情頁面回來則需要快取

補充知識：vue 動態元件（tabs切換）keep-alive：主要用於保留元件狀態或避免重新渲染

通過keep-alive 保留資料值 填寫資料時切換到其他頁面，後返回當前頁資料保留 ，主要用於保留元件狀態或避免重新渲染

 <!--動態元件-component使用-->
 <div class="app">
 <ul>
  <li @click="currView='home'">首頁</li>
  <li @click="currView='abount'">關於我們</li>
 </ul>
 <!--通過keep-alive 保留資料值 填寫資料時切換到其他頁面，後返回當前頁資料保留-->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
   <h2>首頁資料</h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>關於我們資料<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 實現tab切換保持資料狀態就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。