先來看一下效果

這里使用了vuex 來處理數(shù)據(jù)。
（1）在首頁選擇的時候，將選擇的結(jié)果存入state里面。
（2）進入到內(nèi)部頁面，再將state的值 賦值給當(dāng)前要切換tab。

這里只寫一下內(nèi)部tab的代碼，順便解釋一下：

<template><div class="menu"><ul class="tab-tilte"><liv-for="(title, index) in tabTitle":key="`tilte_${index}`":class="{ active: cur == index }">{{ title }}</li></ul><div class="tab-content"><divv-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: ["內(nèi)容一", "內(nèi)容二", "內(nèi)容三", "內(nèi)容四"],cur: 1 //默認(rèn)選中第一個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; } /* 點擊對應(yīng)的標(biāo)題添加對應(yīng)的背景顏色 */ .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 。進入到內(nèi)部頁面，再將值付給當(dāng)前的cur.

總結(jié)

以上是生活随笔為你收集整理的vue制作tab切换（vuex + 动画）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。