订座-路由优化、顶部栏优化

htmldev/dashboard/src/App.vue

@@ -1,18 +1,63 @@
 <template>
-  <div>
+  <div class="af-entry">
     <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"></router-view>
+    <van-tabbar
+      class="af-entry-tabbar"
+      v-model="activeTab"
+      :placeholder="true"
+      v-show="$route.meta.isUseVanTabbar"
+      @change="onChange">
+      <van-tabbar-item
+        name="PlaceList"
+        icon="wap-home-o">订座
+      </van-tabbar-item>
+      <van-tabbar-item
+        name="PlaceReserve"
+        icon="user-o">我的订座
+      </van-tabbar-item>
+    </van-tabbar>
   </div>
 </template>
 
 <script>
+import { Tabbar, TabbarItem } from 'vant'
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    'van-tabbar': Tabbar,
+    'van-tabbar-item': TabbarItem
+  },
+  data () {
+    return {
+      activeTab: 'PlaceList'
+    }
+  },
+  mounted () {
+    const routeName = this.$route.name
+    this.activeTab = ['PlaceList', 'PlaceReserve'].findIndex(item => item === routeName) > -1 ? routeName : ''
+  },
+  methods: {
+    onChange (routeName) {
+      this.$router.replace({ name: routeName })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 @import "./assets/styles/reset";
+
+.af-entry {
+  height: 100%;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  &-tabbar {
+    box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
+  }
+}
 </style>

htmldev/dashboard/src/router/index.js

@@ -12,46 +12,49 @@ const routes = [
   {
     path: '/404',
     name: '404',
-    component: _import('page/404/index')
+    component: _import('page/404/index'),
+    meta: {
+      isUseVanTabbar: false
+    }
   },
   {
     path: '/',
     name: 'index',
-    component: _import('views/index/index')
+    component: _import('views/index/index'),
+    meta: {
+      isUseVanTabbar: true
+    }
   },
   {
     path: '/login',
     name: 'login',
     component: _import('login/index'),
     meta: {
-      title: '登录'
+      title: '登录',
+      isUseVanTabbar: false
     }
   },
   {
-    path: '/place', // 订座入口
-    component: _import('views/place/index'),
-    children: [
-      {
-        path: '',
-        name: 'PlaceList',
-        component: _import('views/place/list/index'),
-        meta: {
-          title: '订座',
-          isUseCache: false,
-          keepAlive: false
-        }
-      },
-      {
-        path: 'reserve',
-        name: 'PlaceReserve',
-        component: _import('views/place/reserve/index'),
-        meta: {
-          title: '我的订座',
-          isUseCache: false,
-          keepAlive: true
-        }
-      }
-    ]
+    path: '/place/list',
+    name: 'PlaceList',
+    component: _import('views/place/list/index'),
+    meta: {
+      title: '订座',
+      isUseCache: false,
+      keepAlive: false,
+      isUseVanTabbar: true
+    }
+  },
+  {
+    path: '/place/reserve',
+    name: 'PlaceReserve',
+    component: _import('views/place/reserve/index'),
+    meta: {
+      title: '我的订座',
+      isUseCache: false,
+      keepAlive: false,
+      isUseVanTabbar: true
+    }
   }
 ]
 

htmldev/dashboard/src/views/place/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="af-container">
-    <keep-alive>
-      <router-view v-if="$route.meta.keepAlive"/>
-    </keep-alive>
-    <router-view v-if="!$route.meta.keepAlive"/>
-    <van-tabbar
-      class="af-van-tabbar"
-      v-model="activeTab"
-      @change="onChange">
-      <van-tabbar-item
-        name="PlaceList"
-        icon="wap-home-o">订座
-      </van-tabbar-item>
-      <van-tabbar-item
-        name="PlaceReserve"
-        icon="user-o">我的订座
-      </van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script>
-import { Tabbar, TabbarItem } from 'vant'
-
-export default {
-  name: 'index',
-  components: {
-    'van-tabbar': Tabbar,
-    'van-tabbar-item': TabbarItem
-  },
-  data () {
-    return {
-      activeTab: 'PlaceList'
-    }
-  },
-  mounted () {
-    const routeName = this.$route.name
-    this.activeTab = ['PlaceList', 'PlaceReserve'].findIndex(item => item === routeName) > -1 ? routeName : ''
-  },
-  methods: {
-    onChange (routeName) {
-      this.$router.replace({ name: routeName })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.af-container {
-  padding-bottom: 50px;
-}
-
-.af-van-tabbar {
-  box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);
-}
-</style>