vue+element ui中tabs标签页，跳转新的页面

使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。

1.建立父组件 aaa.vue 建立子组件bbb.vue和ccc.vue

在父组件中写以下代码

<!--aaa页面 父组件-->
<template>
  <div class="tabZujian">
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="第一个页面" name="first" :key="'first'">
        <child1  v-if="isChildUpdate1"></child1>
      </el-tab-pane>
      <el-tab-pane label="第二个页面" name="second" :key="'second'">
        <child2 v-if="isChildUpdate2"></child2>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
  import ZongLanProcess from './bbb'
  import ytProcess from './ccc'
  export default {
    name: 'tabZujian',
    components: {
      child1: ZongLanProcess,
      child2: ytProcess
    },
    data () {
      return {
        // 默认第一个选项卡
        activeName: 'first',
// 初始化两个变量 isChildUpdate1:true，isChildUpdate2:false；
// 使用v-if控制child1和child2是否渲染。
// 每次切换tab选项的时候，触发事件。让当前点击的tab变量设置位true，让当前组件重新渲染。
// 这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
        isChildUpdate1: true,
        isChildUpdate2: false
      }
    },
    mounted () {
    },
    methods: {
      handleClick (tab) {
        if (tab.name === 'first') {
          this.isChildUpdate1 = true
          this.isChildUpdate2 = false
          this.isChildUpdate3 = false
          this.isChildUpdate4 = false
        } else if (tab.name === 'second') {
          this.isChildUpdate1 = false
          this.isChildUpdate2 = true
          this.isChildUpdate3 = false
          this.isChildUpdate4 = false
        }
      }
    }
  }
</script>

2.在子组件中 bbb.vue

<template>
    <div class="child1">
        我是第一个自组件
    </div>
</template>

<script>
    export default {
      name: 'child1'
    }
</script>

3.在ccc.vue

<template>
    <div class="child2">
        我是第二个自组件
    </div>
</template>

<script>
    export default {
      name: 'child2'
    }
</script>