feat: 增加界面

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
     <router-view />
-    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
-      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
+    <van-tabbar  v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
+      <van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
         <span>{{tab.title}}</span>
         <template #icon="props">
           <img :src="props.active ? tab.active: tab.inactive" alt="">
@@ -21,8 +21,7 @@ export default {
   name: 'App',
   data(){
     return {
-      active: '0',
-      paddingBottom: 0,
+      active: '3',
       tabbar
     }
   },
@@ -30,7 +29,6 @@ export default {
     return {
       root: this,
       tabbar: this.$refs.tabbar,
-      showTabbar: false,
     }
   },
   components: {
@@ -42,21 +40,21 @@ export default {
   },
   watch: {
     '$route': {
-      immediate: true,
-      handler(to){
-        const path = tabbar.map(tab => tab.path);
-        document.title = to.meta.title || '自在福田';
-        this.showTabbar = path.includes(to.path)
+      handler(val){
+        console.log(val)
+         this.active = tabbar.map(v => v.name).indexOf(val.name).toString()
       }
     }
   },
-  mounted(){
-    if(this.showTabbar){
-      this.paddingBottom = this.$refs.tabbar.$el.offsetHeight;
-    } else{
-      this.paddingBottom = 0
+  computed: {
+    showTabbar(){
+      const path = tabbar.map(tab => tab.path);
+      return path.includes(this.$route.path)
+    },
+    paddingBottom(){
+      return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0
     }
-  }
+  },
 }
 </script>