路由配置

src/router/patients.js

+const patientsManage = r => require.ensure([], () => r(require('../views/patients/layout.vue')), 'patientsManage');
+/*我的居民*/
+const myPatientsManage = r => require.ensure([], () => r(require('../views/patients/mypatients-manage/layout.vue')), 'myPatientsManage');
+const patientsList = r => require.ensure([], () => r(require('../views/patients/mypatients-manage/patients-list.vue')), 'patientsList');
+
+/*新增居民*/
+const newManage = r => require.ensure([], () => r(require('../views/patients/new-manage/layout.vue')), 'newManage');
+const newPatient = r => require.ensure([], () => r(require('../views/patients/new-manage/new-patient.vue')), 'newPatient');
+
+
+
+const patientsRouters = {
+  path: '/patients-manage',
+  name: 'patientsManage',
+  component: patientsManage,
+  redirect: 'patients-manage/mypatients-manage/patients-list',
+  children: [
+    {
+      path: 'mypatients-manage',
+      component: myPatientsManage,
+      name: 'myPatientsManage',
+      redirect: 'mypatients-manage/patients-list',
+      children: [
+        {
+          path: 'patients-list',
+          component: patientsList,
+          name: 'patientsList',
+          meta: {
+            title: '我的居民列表',
+            keepAlive: false  //页面不需要缓存
+          },
+        }
+      ],
+      meta: {
+        title: '我的居民',
+      },
+    },
+    {
+      path: 'new-manage',
+      component: newManage,
+      name: 'newManage',
+      redirect: 'new-manage/new-patient',
+      children: [
+        {
+          path: 'new-patient',
+          component: newPatient,
+          name: 'newPatient',
+          meta: {
+            title: '新增居民',
+            keepAlive: false
+          },
+        },
+      ],
+      meta: {
+        title: '新增居民',
+      },
+    },
+
+  ],
+};
+
+export default patientsRouters

src/router/router.js

@@ -9,6 +9,8 @@ const roleManager = r => require.ensure([], () => r(require('../views/system/rol
 const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
 const itemRole = r => require.ensure([], () => r(require('../views/system/item-role.vue')), 'item-role')
 
+import patientsRouters from './patients'
+
 export default [{
     path: '/',
     component: App,
@@ -44,5 +46,6 @@ export default [{
             path: '/item-role',
             component: itemRole
         },
+        patientsRouters,
     ]
-}]
\ No newline at end of file
+}]

src/views/layout/slidebar.vue

@@ -5,14 +5,14 @@
                 <template v-if="item.subs">
                     <el-submenu :index=" 'index_' + _index" :key="item.index">
                         <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
-                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
+                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="'/'+subItem.index">
                             <i class="sub-icon" :class="subItem.icon"></i>
                             {{subItem.title}}
                         </el-menu-item>
                     </el-submenu>
                 </template>
                 <template v-else>
-                    <el-menu-item :index="item.index" :key="item.index">
+                    <el-menu-item :index="'/'+item.index" :key="item.index">
                         <i :class="item.icon"></i>{{ item.title }}
                     </el-menu-item>
                 </template>
@@ -69,6 +69,22 @@ export default {
                             index: 'role'
                         }
                     ]
+                },{
+                    title: '居民管理',
+                    icon: 'el-icon-edit-outline',
+                    index: 'patients-manage',
+                    subs: [
+                      {
+                        title: '我的居民',
+                        icon: 'el-icon-setting',
+                        index: 'patients-manage/mypatients-manage/patients-list'
+                      },
+                      {
+                        title: '新增居民',
+                        icon: 'el-icon-setting',
+                        index: 'patients-manage/new-manage/new-patient'
+                      }
+                    ]
                 }
             ]
         }
@@ -95,7 +111,7 @@ export default {
         }
     },
     methods: {
-    
+
     }
 }
 </script>
@@ -121,15 +137,15 @@ export default {
             color: #fff;
             background: #509284 !important
         }
-        .el-menu-item:hover, 
-        .el-submenu__title:hover, 
-        .slidebar-container .el-menu .el-menu-item:hover, 
+        .el-menu-item:hover,
+        .el-submenu__title:hover,
+        .slidebar-container .el-menu .el-menu-item:hover,
         .slidebar-container .el-menu .el-submenu__title:hover {
             color: #fff;
             background: #06232C;
         }
         // .el-menu-item:focus, .el-menu-item:hover {
-        //     background: #06232C !important; 
+        //     background: #06232C !important;
         // }
     }
 }

src/views/patients/layout.vue

+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+  export default {
+    name: "layout"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/patients/mypatients-manage/layout.vue

+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+  export default {
+    name: "layout"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/patients/mypatients-manage/patients-list.vue

+<template>
+  <p>你好laldl</p>
+</template>
+<script>
+
+</script>
+<style scoped>
+
+</style>

src/views/patients/new-manage/layout.vue

+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+  export default {
+    name: "layout"
+  }
+</script>
+
+<style scoped>
+
+</style>