Tabbar页面统一嵌套

src/router/router.config.js

@@ -6,41 +6,49 @@ export const constantRouterMap = [
   {
     path: '/',
     component: () => import('@/views/layouts/index'),
-    redirect: '/index',
+    redirect: '/Tabbar',
     meta: {
       title: '成长',
       keepAlive: false
     },
     children: [
       {
-        path: '/index',
-        name: 'Development',
-        component: () => import('@/views/development/index'),
-        meta: { title: '成长', keepAlive: false }
-      },
-      {
-        path: '/today',
-        name: 'Today',
-        component: () => import('@/views/today/index'),
-        meta: { title: '今日', keepAlive: false }
-      },
-      {
-        path: '/insight',
-        name: 'Insight',
-        component: () => import('@/views/insight/index'),
-        meta: { title: '洞悉', keepAlive: false }
-      },
-      {
-        path: '/optimize',
-        name: 'Optimize',
-        component: () => import('@/views/optimize/index'),
-        meta: { title: '优化', keepAlive: false }
-      },
-      {
-        path: '/myself',
-        name: 'Myself',
-        component: () => import('@/views/myself/index'),
-        meta: { title: '我的', keepAlive: false }
+        path: '/Tabbar',
+        name: 'Index',
+        redirect: '/index',
+        component: () => import('@/views/Tabbar.vue'),
+        children: [
+          {
+            path: '/index',
+            name: 'Development',
+            component: () => import('@/views/development/index'),
+            meta: { title: '成长', keepAlive: false }
+          },
+          {
+            path: '/today',
+            name: 'Today',
+            component: () => import('@/views/today/index'),
+            meta: { title: '今日', keepAlive: false }
+          },
+          {
+            path: '/insight',
+            name: 'Insight',
+            component: () => import('@/views/insight/index'),
+            meta: { title: '洞悉', keepAlive: false }
+          },
+          {
+            path: '/optimize',
+            name: 'Optimize',
+            component: () => import('@/views/optimize/index'),
+            meta: { title: '优化', keepAlive: false }
+          },
+          {
+            path: '/myself',
+            name: 'Myself',
+            component: () => import('@/views/myself/index'),
+            meta: { title: '我的', keepAlive: false }
+          }
+        ]
       },
       {
         path: '/familyNumber',

src/views/Tabbar.vue

@@ -0,0 +1,24 @@
+<!--  -->
+<template>
+  <div>
+    <div>nav组件</div>
+    <router-view />
+    <TabBar />
+  </div>
+</template>
+
+<script>
+import TabBar from '@/components/TabBar';
+export default {
+  components: { TabBar },
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+/* @import url(); 引入css类 */
+</style>

src/views/development/index.vue

@@ -1,14 +1,12 @@
 <!--  -->
 <template>
   <div>
-    <TabBar />
+    啊实打实的
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar';
 export default {
-  components: { TabBar },
   data() {
     return {};
   },

src/views/insight/index.vue

@@ -1,14 +1,12 @@
 <!--  -->
 <template>
   <div>
-    <TabBar />
+
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar';
 export default {
-  components: { TabBar },
   data() {
     return {};
   },

src/views/myself/index.vue

@@ -53,7 +53,6 @@
         <SubmenuList :title="othersSetting.title" :list="othersSetting.list"> </SubmenuList>
       </div>
     </div>
-    <TabBar />
   </div>
 </template>
 
@@ -64,9 +63,8 @@ import APIUser from '@/api/user';
 import APIDevice from '@/api/device';
 import ToastService from '@/services/toast-service';
 import { isNotNull } from '@/services/utils-service';
-import TabBar from '@/components/TabBar';
 export default {
-  components: { /* NavBar,  */ SubmenuList, TabBar },
+  components: { /* NavBar,  */ SubmenuList },
   data() {
     return {
       userInfos: {},

src/views/optimize/index.vue

@@ -1,14 +1,11 @@
 <!--  -->
 <template>
   <div>
-    <TabBar />
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar';
 export default {
-  components: { TabBar },
   data() {
     return {};
   },

src/views/today/index.vue

@@ -1,14 +1,11 @@
 <!--  -->
 <template>
   <div>
-    <TabBar />
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar';
 export default {
-  components: { TabBar },
   data() {
     return {};
   },