vue 动态加载tab选项卡组件

很多时候我们看到的选项卡都是单页面的，但是在vue里面的话这个重复的出现相同头部的情况。作为程序员的我们肯定是不允许她的发生的，

那么我就分享一点我的项目心得吧，不会的可以学习一下，会的可以复习一下，觉得菜的可以评论分享一下你的大牛操作0.0

话不多说 直接贴上源码：

<ul class="trialDetail-nav">
<li  @click="trialDetailChoose = 'trialBaseNews'" :class="{active: trialDetailChoose === 'trialBaseNews'}">一</li>
<li @click="trialDetailChoose = 'trialMedicine'" :class="{active: trialDetailChoose === 'trialMedicine'}">二</li>
<li @click="trialDetailChoose = 'trialStandard'" :class="{active: trialDetailChoose === 'trialStandard'}">三</li>
<li @click="trialDetailChoose = 'trialDisease'" :class="{active: trialDetailChoose === 'trialDisease'}">四</li>
</ul>

<component :is="trialDetailChoose" :trialId="trialId"></component>

data () {
return {
trialDetailChoose: 'trialBaseNews',}

components: {
trialBaseNews: resolve => require(['./trialBaseNews.vue'], resolve),
trialMedicine: resolve => require(['./trialMedicine.vue'], resolve),
trialStandard: resolve => require(['./trialStandard.vue'], resolve),
trialDisease: resolve => require(['./trialDisease.vue'], resolve),
}

最后祝愿一群和我一样每天还在为项目奔波的人， 可以开开心心的过每一天^_^，一起加油！！！