对接接口

src/App.vue

@@ -1,23 +1,70 @@
 <template>
-  <div id="app">
+  <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
     <router-view />
+    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route>
+      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">{{tab.title}}</van-tabbar-item>
+    </van-tabbar>
   </div>
 </template>
 
 <script>
+import { tabbar } from '../src/router'
 export default {
   name: 'App',
+  data(){
+    return {
+      active: '0',
+      paddingBottom: 0,
+      tabbar
+    }
+  },
+  provide(){
+    return {
+      root: this,
+      tabbar: this.$refs.tabbar
+    }
+  },
+  computed: {
+    showTabbar(){
+      const path = tabbar.map(tab => tab.path);
+      return path.includes(this.$route.path)
+    }
+  },
   components: {
+  },
+  watch: {
+    '$route': {
+      immediate: true,
+      handler(to){
+        document.title = to.meta.title || '自在福田';
+      }
+    }
+  },
+  mounted(){
+    if(this.showTabbar){
+      this.paddingBottom = this.$refs.tabbar.$el.offsetHeight;
+    } else{
+      this.paddingBottom = 0
+    }
   }
 }
 </script>
 
 <style>
 @import '~@/assets/css/reset.css';
+@import '//at.alicdn.com/t/font_2897403_zb1glrkwpij.css';
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  max-width: 750px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.tabbar{
+  padding-top: .57rem;
+  background: url('~@/assets/img/bg.png') top center no-repeat;
+  background-size: contain;
 }
 </style>