vue 中使用keepAlive狀態保持

 

　　

keepAlive狀態保持

1 主要實現原理，狀態保持的路由不會執行生命周期的鈎子函數，只有第一次進入頁面會執行鈎子函數。
2 設置當前頁面保持keepAlive  直接在路由meta中配置即可 
meta{
keepALive:true
}

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
 
actived :這也是一個鈎子函數，keepAlive狀態保持的頁面中生命周期的鈎子函數不會觸發，但是會觸發actived鈎子函數，那么這樣可操作性就很大了。
2 keepalive 狀態保持的頁面對應的會又一個actived鈎子函數，每次進入頁面都會執行的函數，在keepalive狀態保持的路由，如果需要加載created，
可以在actived鈎子函數中執行，切記第一次進入會執行生命周期函數同時actived鈎子函數也會執行 ，
必要情況進行判斷，避免兩個函數都執行造成數據渲染問題，路由跳轉等問題。
 3 在局部導航守衛中修改keepalive的值，為true或者false，修改之后同樣第一次會執行created 和 actived鈎子函數，
需要根據業務需求進行處理。 （代碼參考結合實際項目）
 演示一 ： actived中執行的 activated() 
{ if ( this.cancel==='取消訂單' )
{ console.log('取消訂單');
 this.active='已取消'; this.parameterObj.orderStatus ='3,4,5';
 this.listDate=[]; if(this.uniqueID)
{ this.listDate=[]; this.parameterObj.uniqueID=this.uniqueID; this.renderOrderList(); }
 this.setCancelOrderAction({cancel:''}); }
 if(this.$route.params.orderListActive === 1)
{ if(this.uniqueID){ this.parameterObj.uniqueID=this.uniqueID; this.active='待付款'; this.parameterObj.orderStatus='0,2'; this.listDate = []; 
this.renderOrderList() } } if(this.$route.params.orderListActive === 0){ if(this.uniqueID){ this.parameterObj.uniqueID=this.uniqueID; this.active='全部'; 
this.parameterObj.orderStatus='0,1,2,3,4,5'; this.listDate = []; this.renderOrderList() } } 演示二：created中執行的 ，在created中進行判斷避免執行created中的函數 
if ( this.cancel==='取消訂單' ){ return } else if(this.$route.params.orderListActive === 1)
{ return } else if(this.$route.params.orderListActive === 0){ return } else { if(this.uniqueID)
{ console.log(222); this.parameterObj.uniqueID=this.uniqueID; this.listDate = []; this.renderOrderList(); }
else { this.getAppUserInfo(); } }