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(); } }