<template>
  <div class="main-container">
    <el-tabs v-model="currentView">
      <el-tab-pane label="电视" name="Television"></el-tab-pane>
      <el-tab-pane label="电影" name="Movie"></el-tab-pane>
      <el-tab-pane label="综艺" name="Variety"></el-tab-pane>
    </el-tabs>
    <!--:is 的作用：会将div标签转换成 currentView 变量绑定的这个组件-->
    <div :is="currentView" keep-alive></div>
  </div>
</template>

<script>
  export default {
    components: {
      //以下方式引入路由是路由的懒加载，有利于页面优化
      Television: resolve => {
        require(['./build-lihua-process.vue'], resolve)
      },
      Movie: resolve => {
        require(['./build-monitor.vue'], resolve)
      },
      Variety: resolve => {
        require(['./build-recycling.vue'], resolve)
      }
    },
    data() {
      return{
        currentView: 'Television', //当前组件
      }
    },
    methods:{
    },
    created(){
    }
  }
</script>