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","");
}
}
},