vue制作tab切换（vuex + 动画）

先来看一下效果

这里使用了vuex 来处理数据。
（1）在首页选择的时候，将选择的结果存入state里面。
（2）进入到内部页面，再将state的值 赋值给当前要切换tab。

这里只写一下内部tab的代码，顺便解释一下：

<template>
 <div class="menu">
   <ul class="tab-tilte">
     <li
       v-for="(title, index) in tabTitle"
       :key="`tilte_${index}`"
       :class="{ active: cur == index }"
     >
       {{ title }}
     </li>
   </ul>
   <div class="tab-content">
     <div
       v-for="(m, index) in tabMain"
       v-show="cur == index"
       :key="`content_${index}`"
     >
       {{ m }}
     </div>
   </div>
 </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
 data() {
   return {
     tabTitle: ["回到首页", "大赛介绍", "作品列表", "我要投稿"],
     tabMain: ["内容一", "内容二", "内容三", "内容四"],
     cur: 1 //默认选中第一个tab
   };
 },
 computed: {
   ...mapState(["selectTab"])
 },
 mounted() {
   this.cur = this.selectTab;
 },
 methods: {
   changeIndex(index) {
     this.changeLink(index);
     this.cur = index;
   }
 }
};
</script>
<style lang="scss" scoped>
@import "../../../../style/base";
.menu {
 width: 100%;
}
.tab-tilte {
 width: 100%;
 padding: 14px 22px;
 display: flex;
 justify-content: space-between;
}
.tab-tilte li {
 padding: 10px 10px;
 text-align: center;
 background-color: #f4f4f4;
 cursor: pointer;
 width: 70px;
 height: 70px;
 font-size: 18px;
 text-align: center;
 border-radius: 8px;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
 background-color: #09f;
 color: #fff;
}
.tab-content div {
 //   float: left;
 //   width: 25%;
 line-height: 100px;
 text-align: center;
}
</style>

selectTab是第一次 在主界面，点击三个菜单选择的值，这里存储1，2，3 。进入到内部页面，再将值付给当前的cur.