vue + element + Tabs 标签页的使用

切换的时候使用不同的组件：

第一种：

<template>
  <div>
  		
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="浏览记录" name="1"></el-tab-pane>      
        <el-tab-pane label="谁看过我" name="2"></el-tab-pane>
        <el-tab-pane label="我看过谁" name="3"></el-tab-pane>
        <el-tab-pane label="我的收藏" name="4"></el-tab-pane>
        <el-tab-pane label="设置密码" name="5"></el-tab-pane>
     
	      <div class="tab-content">
	        <keep-alive>
	          <component :is="curTabcompnents[activeName]"></component>
	        </keep-alive>
	      </div>
 	    </el-tabs>
  </div>
</template>

<script>
import History from './components/History'                // 浏览记录
import SeeMe from './components/SeeMe'                    // 谁看过我
import SeeWho from './components/SeeWho'                  // 我看过谁
import Collection from './components/Collection'          // 我的收藏
import Password from './components/Password'              // 设置密码
export default {
  data() {
    return {
      activeName: '1',
      curTabcompnents: {
        '1': 'History',
        '2': 'SeeMe',
        '3': 'SeeWho',
        '4': 'Collection',
        '5': 'Password',
      }
    }
  },
  components: { History, SeeMe, SeeWho, Collection, Password},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    }
  },
}
</script>

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

第二种：组件切换时动态加载自定义组件

<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
                v-for="(item,index) in tabList"
                :key="index"
                :label="item.label"
                :name="item.name"
            >
               <keep-alive>
                 <component :is='item.component'></component>
               </keep-alive>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import History from './components/History'                // 浏览记录
import SeeMe from './components/SeeMe'                    // 谁看过我
import SeeWho from './components/SeeWho'                  // 我看过谁
import Collection from './components/Collection'          // 我的收藏
import Password from './components/Password'              // 设置密码
export default {
  data() {
    return {
      activeName: 'History',
      tabList: [
        {
          label: '浏览记录',
          name: 'History',
          component: History
        },
        {
          label: '谁看过我',
          name: 'SeeMe',
          component: SeeMe
        },
        {
          label: '我看过谁',
          name: 'SeeWho',
          component: SeeWho
        },
        {
          label: '我的收藏',
          name: 'Collection',
          component: Collection
        },
        {
          label: '设置密码',
          name: 'Password',
          component: Password
        },
      ]
  },
  components: { History, SeeMe, SeeWho, Collection, Password},
  methods: {
    handleClick(tab) {
    	this.activeName = tab.name;
    }
  },
}