1、父级组件,通过ref调用子组件,activated每次点击页面都会执行
<useele ref="useele" :lineData="lineData" :timenum="timenum" :type="type"></useele>
activated(){
if(this.$refs.useele){
this.$refs.useele.resizeEcharts();
}
if(this.$refs.chartsbox){
this.$refs.chartsbox.resizeEcharts();
}
},
2、子组件,让echarts刷新
resizeEcharts(){
if (this.myChart != null && this.myChart != "" && this.myChart !=undefined{
this.myChart.resize();
}
},
二、动态控制keep-alive缓存
1、在vuex建立数组keepAlive,用于存放需要缓存的组件name
2、App.vue中、引入keepAlive
<keep-alive :include="keepAlive">
<router-view></router-view>
</keep-alive>
created(){
this.$router.push({path: '/Main'});
this.$store.dispatch("changeKeepAlive","Main");
},
页面标签关闭时,需要剪切掉对应的组件name
//关闭标签的同时,也关闭组件缓存
this.keepAlive.splice(this.keepAlive.indexOf(val.name), 1);
打开新页面时,监听路由变化
removalArr(val){
for(let i = 0;i<this.keepAlive.length;i++){//查找是否有包含的缓存组件
if(this.keepAlive[i] == val){//如果有,直接return
return true;
}
}
return false;
}
watch: {
$route(to,from){
if(!this.removalArr(to.name) && to.name != "Login"){//如果不存在缓存的组件,并且登录页设置为不缓存
this.$store.dispatch("changeKeepAlive",to.name);//将此组件添加至缓存中
}else if(to.name == "Login"){//如果跳转到登录页,需清空所有的缓存
this.$store.dispatch("changeKeepAlive",[]);//清空
this.$store.dispatch("changTagArry","");
}
}
},