scenario: a home page, B list page, C details page
B---->C keepAlive:true
A---->C
B---->C ()
A---->C ,
:
{ path:"notice",meta:{keepAlive:true},title:"",name:"notice",icon:"ios-paper", component: () => import("@/views/production-order/production-notice.vue")},
{ path:"editNotice",meta:{keepAlive:true},title:"",name:"editNotice",icon:"ios-paper", component: () => import("@/views/production-order/edit-notice.vue")}
<!---->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!---->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
production-notice.vue page
beforeRouteEnter(to,from,next){
//to= from=>
//editNotic
if(from.name === "editNotice"){
from.meta.keepAlive = true;
//editNotice
}else if(from.name !== "editNotice"){
//""
from.meta.keepAlive = true;
};
next();
},
beforeRouteLeave(to,from,next){
console.log("",to)
console.log("",from)
//
if(to.name === "editNotice"){
to.meta.keepAlive = false;
}else if(to.name !== "editNotice"){
to.meta.keepAlive = true;
};
next();
}
edit-notice.vue page
beforeRouteEnter(to,from,next){
//notice,,
if(from.name === "notice"){
to.meta.keepAlive = false;
next()
}else if(from.name !== "notice"){
//notice,,
to.meta.keepAlive = true;
next()
};
},
beforeRouteLeave(to,from,next){
if(to.name !== "notice"){
//
if(!from.meta.keepAlive){
from.meta.keepAlive=true;//CB
}
next();
}if(to.name === "notice"){
//
from.meta.keepAlive = true;
next();
};
}