路由新建

src/router/modules/index.js

@@ -35,15 +35,67 @@ export default [
       title: "工作桌面",
       auth: "5"
     },
-    component: () => import("@/views/Home.vue")
+    component: () => import("@/views/Home.vue"),
+    children: [
+      {
+        path: "/lanmugl",
+        name: "lanmugl",
+        meta: {
+          title: "栏目管理",
+          auth: "5"
+        },
+        component: () => import("@/views/lanmugl/index.vue")
+      },
+      {
+        path: "/xxfb",
+        name: "xxfb",
+        meta: {
+          title: "信息发布",
+          auth: "5"
+        },
+        component: () => import("@/views/xxfb/index.vue")
+      },{
+        path: "/fbgl",
+        name: "fbgl",
+        meta: {
+          title: "发布管理",
+          auth: "5"
+        },
+        component: () => import("@/views/fbgl/index.vue")
+      },{
+        path: "/nrgl",
+        name: "nrgl",
+        meta: {
+          title: "内容管理",
+          auth: "5"
+        },
+        component: () => import("@/views/nrgl/index.vue")
+      },{
+        path: "/mbgl",
+        name: "mbgl",
+        meta: {
+          title: "模板管理",
+          auth: "5"
+        },
+        component: () => import("@/views/mbgl/index.vue")
+      },{
+        path: "/mbgl",
+        name: "mbgl",
+        meta: {
+          title: "模板管理",
+          auth: "5"
+        },
+        component: () => import("@/views/mbgl/index.vue")
+      },{
+        path: "/yhgl",
+        name: "yhgl",
+        meta: {
+          title: "用户管理",
+          auth: "5"
+        },
+        component: () => import("@/views/yhgl/index.vue")
+      }
+    ]
   },
-  {
-    path: "/lanmugl",
-    name: "lanmugl",
-    meta: {
-      title: "栏目管理",
-      auth: "5"
-    },
-    component: () => import("@/views/lanmugl/index.vue")
-  }
+
 ];

src/views/Home.vue

@@ -6,44 +6,30 @@
       </el-header>
       <el-container>
         <el-aside width="200px">
-          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
-            <el-radio-button :label="false">展开</el-radio-button>
-            <el-radio-button :label="true">收起</el-radio-button>
-          </el-radio-group>
-          <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
-            <el-submenu index="1">
-              <template slot="title">
-                <i class="el-icon-location"></i>
-                <span slot="title">导航一</span>
-              </template>
-              <el-menu-item-group>
-                <span slot="title">分组一</span>
-                <el-menu-item index="1-1">选项1</el-menu-item>
-                <el-menu-item index="1-2">选项2</el-menu-item>
-              </el-menu-item-group>
-              <el-menu-item-group title="分组2">
-                <el-menu-item index="1-3">选项3</el-menu-item>
-              </el-menu-item-group>
-              <el-submenu index="1-4">
-                <span slot="title">选项4</span>
-                <el-menu-item index="1-4-1">选项1</el-menu-item>
+<!--          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
+<!--            <el-radio-button :label="false">展开</el-radio-button>-->
+<!--            <el-radio-button :label="true">收起</el-radio-button>-->
+<!--          </el-radio-group>-->
+          <el-menu unique-opened :default-active="$route.path" class="my-menu" router background-color="#324157" text-color="#fff" >
+<!--            <template  v-for="(item , index) in $router.options.routes" v-if="item.meta.menuShow">-->
+            <template  v-for="(item , index) in routes" v-if="item.meta.menuShow">
+              <el-submenu :index="item.path" v-if="item.children && item.children.length > 1">
+                <template slot="title">
+                  {{item.meta.menuName}}
+                </template>
+                <el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.meta.menuShow">
+                  <span>{{itemChild.meta.menuName}}</span>
+                </el-menu-item>
               </el-submenu>
-            </el-submenu>
-            <el-menu-item index="2">
-              <i class="el-icon-menu"></i>
-              <span slot="title">导航二</span>
-            </el-menu-item>
-            <el-menu-item index="3" disabled>
-              <i class="el-icon-document"></i>
-              <span slot="title">导航三</span>
-            </el-menu-item>
-            <el-menu-item index="4">
-              <i class="el-icon-setting"></i>
-              <span slot="title">导航四</span>
-            </el-menu-item>
+              <el-menu-item :index="item.path" v-else>
+                {{item.meta.menuName}}
+              </el-menu-item>
+            </template>
           </el-menu>
         </el-aside>
-        <el-main>Main</el-main>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
       </el-container>
     </el-container>
   </div>
@@ -51,45 +37,98 @@
 
 <script>
 import headerBox from '../components/header.vue'
-import { mapGetters } from "vuex";
+import { mapGetters } from 'vuex'
+
 export default {
-  name: "Home",
-  components:{
+  name: 'Home',
+  components: {
     headerBox
   },
   data() {
-    return{
+    return {
       isCollapse: true,
+      routes:[
+        {
+          path: '/lanmugl',
+          name: 'lanmugl',
+          meta:{
+            menuShow: true,
+            menuName: '栏目管理'
+          },
+          children: []
+        },{
+          path: '/xxfb',
+          name: 'xxfb',
+          meta:{
+            menuShow: true,
+            menuName: '信息发布'
+          },
+          children: []
+        },{
+          path: '/fbgl',
+          name: 'fbgl',
+          meta:{
+            menuShow: true,
+            menuName: '发布管理'
+          },
+          children: []
+        },{
+          path: '/nrgl',
+          name: 'nrgl',
+          meta:{
+            menuShow: true,
+            menuName: '内容管理'
+          },
+          children: []
+        },{
+          path: '/mbgl',
+          name: 'mbgl',
+          meta:{
+            menuShow: true,
+            menuName: '模板管理'
+          },
+          children: []
+        },{
+          path: '/yhgl',
+          name: 'yhgl',
+          meta:{
+            menuShow: true,
+            menuName: '用户管理'
+          },
+          children: []
+        }
+      ]
     }
   },
   created() {
   },
   computed: {
-    ...mapGetters(["defaultGoodsImage", "userAuth"])
+    ...mapGetters(['defaultGoodsImage', 'userAuth'])
   },
   methods: {
+    handleSelect(){},
     handleOpen(key, keyPath) {
-      console.log(key, keyPath);
+      console.log(key, keyPath)
     },
     handleClose(key, keyPath) {
-      console.log(key, keyPath);
+      console.log(key, keyPath)
     }
   }
-};
+}
 </script>
 <style lang="scss">
-.home{
-  .el-header {
-    padding: 0;
-    height: 60px;
-    background-color: rgba(18, 35, 87, .7);
-  }
+  .home {
+    .el-header {
+      padding: 0;
+      height: 60px;
+      background-color: rgba(18, 35, 87, .7);
+    }
 
-  .el-main {
-    height: calc(100vh - 60px);
-    margin: 0;
-    border: none;
-    width: 100%;
+    .el-main {
+      height: calc(100vh - 60px);
+      margin: 0;
+      border: none;
+      width: 100%;
+    }
   }
-}
 </style>

src/views/fbgl/index.vue

+<template>
+  <!--发布管理-->
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/mbgl/index.vue

+<template>
+  <!--模板管理-->
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/nrgl/index.vue

+<template>
+  <!--内容管理-->
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xxfb/index.vue

+<template>
+  <!--信息发布-->
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/yhgl/index.vue

+<template>
+<!--  用户管理-->
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>