优化

src/App.vue

@@ -1,21 +1,11 @@
 <template>
-  <div class="app" id="app">
-    <keep-alive>
-      <router-view v-if="$route.meta.keepAlive"></router-view>
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive"></router-view>
-    <!-- tabbar -->
-    <TabBar></TabBar>
+  <div id="app">
+    <router-view />
   </div>
 </template>
 <script>
-import TabBar from '@/components/TabBar'
-
 export default {
-  name: 'App',
-  components: {
-    TabBar
-  }
+  name: 'App'
 }
 </script>
 <style lang="scss"></style>

src/components/TabBar.vue

@@ -1,28 +1,37 @@
 <template>
   <div>
-    <van-tabbar fixed route>
-      <van-tabbar-item to="/" icon="home-o">
-        首页
-      </van-tabbar-item>
-      <van-tabbar-item to="/about" icon="user-o">
-        关于我
+    <van-tabbar fixed route v-model="active" @change="handleChange">
+      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
+        {{ item.title }}
       </van-tabbar-item>
     </van-tabbar>
-    <!--  <van-tabbar fixed v-model="active" @change="onChange">
-      <van-tabbar-item  to="/home" icon="home-o">首页</van-tabbar-item>
-      <van-tabbar-item  to="/about" icon="user-o">关于我</van-tabbar-item>
-    </van-tabbar> -->
   </div>
 </template>
 <script>
 export default {
   name: 'TabBar',
-  data() {
-    return {
-      active: 0
+  props: {
+    defaultActive: {
+      type: Number,
+      default: 0
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
     }
   },
-  methods: {}
+  data() {
+    return {
+      active: this.defaultActive
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value)
+    }
+  }
 }
 </script>
 

src/config/router.config.js

@@ -6,19 +6,28 @@ export const constantRouterMap = [
   {
     path: '/',
     name: 'index',
-    component: () => import('@/views/home/index'), // 路由懒加载
+    component: () => import('@/layouts/TabBarLayout'), // 路由懒加载
+    redirect: '/home',
     meta: {
       title: '首页', // 页面标题
       keepAlive: false // keep-alive 标识
-    }
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: () => import('@/views/home/about'),
-    meta: {
-      title: '关于我',
-      keepAlive: false
-    }
+    },
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        component: () => import('@/views/home/index'),
+        meta: { title: '首页', keepAlive: false }
+      },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/home/about'),
+        meta: {
+          title: '关于我',
+          keepAlive: false
+        }
+      }
+    ]
   }
 ]

src/layouts/TabBarLayout.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="tabbar-layout-containter">
+    <div class="tabbar-layout-content">
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view></router-view>
+      </keep-alive>
+      <router-view v-else></router-view>
+    </div>
+    <div class="tabbar-layout-footer">
+      <TabBar :data="tabbars" @change="handleChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TabBar from '@/components/TabBar'
+export default {
+  name: 'TabBarLayout',
+  data() {
+    return {
+      tabbars: [
+        {
+          title: '首页',
+          to: {
+            name: 'Home'
+          },
+          icon: 'home-o'
+        },
+        {
+          title: '关于我',
+          to: {
+            name: 'About'
+          },
+          icon: 'user-o'
+        }
+      ]
+    }
+  },
+  components: {
+    TabBar
+  },
+  methods: {
+    handleChange(v) {
+      console.log('tab value:', v)
+    }
+  }
+}
+</script>