修改index.vue中的tab切换

src/views/home/index.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="home">
     <transition name="tab" mode="out-in">
-      <component :is="current" class="page" />
+      <component :is="currentComponents" class="page" />
     </transition>
-    <van-tabbar :active="active" @change="onChange">
+    <van-tabbar v-model="activeTabName" @change="onChange">
       <van-tabbar-item
         v-for="(item, index) in tabbars"
         :key="index"
         :icon="item.icon"
-        @click="tab(index, item)"
       >
         <span>{{ item.title }}</span>
       </van-tabbar-item>
@@ -26,38 +25,25 @@ export default {
   components: { PageLearn, PageAnswer, PageExam, PagePerson },
   data() {
     return {
-      active: 0,
-      current: "page-learn",
-      pageList: ["page-learn", "page-answer", "page-exam", "page-person"],
+      activeTabName: 0,
+      currentComponents: "pageLearn",
+      pageList: ["pageLearn", "pageAnswer", "pageExam", "pagePerson"],
       tabbars: [
-        { title: "学习", icon: "home-o", pageName: "page-learn" },
-        { title: "答题", icon: "search", pageName: "page-answer" },
-        { title: "考试", icon: "setting-o", pageName: "page-exam" },
-        { title: "我的", icon: "contact", pageName: "page-person" }
+        { title: "学习", icon: "home-o", pageName: "pageLearn" },
+        { title: "答题", icon: "search", pageName: "pageAnswer" },
+        { title: "考试", icon: "setting-o", pageName: "pageExam" },
+        { title: "我的", icon: "contact", pageName: "pagePerson" }
       ]
     };
   },
-  created() {
-    this.tab(0, this.tabbars[0]);
-  },
+  created() { },
   methods: {
-    onChange(event) {
-      console.log("---" + event);
-      this.active = event;
-      let pageName = this.pageList[this.active];
-      if (this.current !== pageName) {
-        this.current = pageName;
-        this.$router.replace({ name: "home", query: { page: pageName } });
-      }
-    },
-    tab(index, tabbar) {
-      this.active = index;
-      console.log("---index" + index + "---" + JSON.stringify(tabbar));
-      let pageName = tabbar.pageName;
-      if (this.current !== pageName) {
-        this.current = pageName;
-        this.$router.replace({ name: "home", query: { page: pageName } });
-      }
+    onChange(index) {
+      this.currentComponents = this.pageList[this.activeTabName];
+      // if (this.current !== pageName) {
+      //   this.current = pageName;
+      //   this.$router.replace({ name: "home", query: { page: pageName } });
+      // }
     }
   }
 };