Vue-keep-alive 缓存组件 & 动态组件

<template>
  <div class="active">
    <ul>
      <li v-for="(item, index) in title"
      :key="index"
      :class="nowIndex == index ? 'liClick' : ''"
      v-text="item"
      @click="tapFun(index)"></li>
    </ul>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
  </div>
</template>

<script>
import ActiveBoxOne from './ActiveBoxOne' // 引用一级板块组件
import ActiveBoxTwo from './ActiceBoxTwo'

export default {
  data () {
    return {
      nowIndex: 0,
      activeName: 'ActiveBoxOne',
      title: ['科目', '状态']
    }
  },
  methods: {
    tapFun: function (index) {
      const $this = this
      $this.nowIndex = index // class切换
      switch (index) { // 组件切换
        case 0:
          $this.activeName = 'ActiveBoxOne'
          break
        case 1:
          $this.activeName = 'ActiveBoxTwo'
          break
      }
    }
  },
  components: {
    ActiveBoxOne,
    ActiveBoxTwo
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.active{
  width: 500px;
  height: 300px;
  border: #f00 solid 1px;
  margin: 0 auto;
}
ul{
  list-style-type: none;
}
.active ul:after{
  content: '\200B';
  height: 0;
  display: block;
  clear: both;
}
ul li{
  float: left;
  width: 49.6%;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  border: #ccc solid 1px;
}
ul .liClick{
  color: #fff;
  background: #f00;
}
</style>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in title"
      :key="index"
      v-text="item"
      :class="nowIndex == index ? 'liClick' : ''"
      @click="tapFun(index)"
      ></li>
    </ul>
    <section>
      <keep-alive>
        <component :is="activeName"></component>
      </keep-alive>
    </section>
  </div>
</template>

<script>
import ActiveOne from './ActiveOne'
import ActiveTwo from './ActiveTwo'
import ActiveThree from './ActiveThree'

export default {
  data () {
    return {
      nowIndex: 0,
      activeName: ActiveOne,
      title: ['科目一', '科目二', '科目三']
    }
  },
  methods: {
    tapFun: function (index) {
      const $this = this
      $this.nowIndex = index
      switch (index) {
        case 0:
          $this.activeName = 'ActiveOne'
          break
        case 1:
          $this.activeName = 'ActiveTwo'
          break
        default:
          $this.activeName = 'ActiveThree'
      }
    }
  },
  components: {
    ActiveOne,
    ActiveTwo,
    ActiveThree
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
div:after{
  content: '\200B';
  height: 0;
  display: block;
  clear: both;
}
ul{
  list-style-type: none;
  float: left;
  width: 30%;
}
ul li{
  border: #ccc solid 1px;
  padding: 5px 0;
  cursor: pointer;
}
ul .liClick{
  color: #000;
  background: #ccc;
}
section{
  width: 69.5%;
  height: 100%;
  border: #ccc;
  float: right;
}
</style>

<template>
  <div v-text="content"></div>
</template>

<script>
export default {
  data () {
    return {
      content: '已拿证'
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <h3 v-text="content"></h3>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: 'activeone'
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>