html
<div >
<keep-alive>
<component :is="tagName"></component>
</keep-alive>
</div>
script
import echarts from "echarts";
import pageHead from "../components/pageHead.vue";
import rightFoot from "../components/rightFoot.vue";
import unitDetailList from "../components/unitDetail/unitDetailList.vue";
import unitDevice from "../components/unitDetail/unitDevice.vue";
import unitSpace from "../components/unitDetail/unitSpace.vue";
import unitDanger from "../components/unitDetail/unitDanger.vue";
import unitInspection from "../components/unitDetail/unitInspection.vue";
import unitPeople from "../components/unitDetail/unitPeople.vue";
import baoxianTotal from "../components/unitDetail/baoxianTotal.vue";
import weibaoTotal from "../components/unitDetail/weibaoTotal.vue";
import weibaoRecord from "../components/unitDetail/weibaoRecord.vue";
import unitVideo from "../components/unitDetail/unitVideo.vue";
import xfPower from "../components/unitDetail/xfPower.vue";
export default {
components: {
pageHead,
unitDetailList,
rightFoot,
unitDevice,
unitSpace,
unitDanger,
unitInspection,
unitPeople,
baoxianTotal,
weibaoTotal,
weibaoRecord,
unitVideo,
xfPower
},
然后再data中选择一个数值作为加载参考,在改变时变更组件
watch:{
liIndex(val){
switch(this.liIndex){
case 1:this.tagName = 'unitDevice';break
case 2:this.tagName = 'unitSpace';break
case 3:this.tagName = 'unitDanger';break
case 4:this.tagName = 'unitInspection';break
case 5:this.tagName = 'unitVideo';break
case 6:this.tagName = 'unitPeople';break
case 7:this.tagName = 'baoxianTotal';break
case 8:this.tagName = 'weibaoTotal';break
case 9:this.tagName = 'weibaoRecord';break
case 10:this.tagName = 'xfPower';break
}
}
},