使用vue实现简易tab切换的功能

tab切换，就是点击上面的标题，下面的内容随之发生改变。有两种基本实现思路。
1.通过 v-if 或者 v-show 来控制显示和隐藏

<template>
  <div class="tab">
    <header>
      <span @click="index=0">历史</span>
      &nbsp;&nbsp;&nbsp;
      <span @click="index=1">文化</span>
    </header>
    <main>
      <div v-show="index===0">这是历史的内容部分</div>
      <div v-show="index===1">这是文化的内容部分</div>
    </main>
  </div>
</template>
<script>
export default {
  data(){
    index:0
  }
}
</script>

2.通过路由切换来实现( router-link )，这里的路由部分就不写了，配置下router1、router2、router3就行了

<div class="tab">
  <router-link to="router1">路由组件一</router-link>
  <router-link to="router2">路由组件二</router-link>
  <router-link to="router3">路由组件三</router-link>
  <router-view />
</div>