Vue component动态组件

动态组件：多个组件使用同一个挂载，并动态切换，使用is特性 :is=""

    <div class="content">
      <Component :is="tabList && tabList[active] && tabList[active].component"></Component>
    </div>

is绑定组件的是组件name属性值，也可以绑定一个组件的构造器选项对象。

<script>
// 依稀啊组件根据自己的实际情况去写，这里就是举例
import Video from './components/Video'
import Material from './components/Material'
import Collection from './components/Collection'
import Handbook from './components/Handbook'
import Exam from './components/Exam'
import TrainingClass from './components/TrainingClass'
import BusinessSchool from './components/BusinessSchool'
export default {
  name: 'Index',
  mixins: [],
  components: { Video, Material, Collection, Handbook, Exam, TrainingClass, BusinessSchool },
  props: {},
  data () {
    return {
      tabList: [
        { menuName: '1', component: 'Video' },
        { menuName: '2', component: 'Material' },
        { menuName: '3, component: 'Handbook' },
        { menuName: '4', component: 'BusinessSchool' },
        { menuName: '5', component: 'Exam' },
        { menuName: '6', component: 'TrainingClass' }
      ],
      active: 0
    }
  },
  methods: {
    clickTab (index) {
      this.active = index
    },
    setCurrentTab (activeName) {
      let currentIndex = this.tabList.findIndex(item => item.menuName === activeName)
      if (currentIndex) {
        this.active = currentIndex || 0
      }
    }
  },
  filters: {},
  created () { },
  mounted () {
    let { activeName } = this.$route.query
    console.log(this.$route.query)
    if (activeName) {
      this.setCurrentTab(activeName)
    }
  },
  activated () {
    let { activeName } = this.$route.query
    if (activeName) {
      this.setCurrentTab(activeName)
    }
  }
}
</script>