.

src/views/Home/Home.vue

@@ -8,58 +8,6 @@
             </div>
         </header>
         <section class="section">
-            <!-- <el-row class="tac">
-                <el-col :span="3">
-                    <h5>默认颜色</h5>
-                    <el-menu
-                        default-active="2"
-                        class="el-menu-vertical-demo"
-                        @open="handleOpen"
-                        @close="handleClose"
-                    >
-                        <el-submenu index="1">
-                            <template slot="title">
-                                <i class="el-icon-location"></i>
-                                <span>导航一</span>
-                            </template>
-                            <el-menu-item-group>
-                                <template slot="title">分组一</template>
-                                <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">
-                                <template slot="title">选项4</template>
-                                <el-menu-item index="1-4-1">选项1</el-menu-item>
-                            </el-submenu>
-                        </el-submenu>
-
-                        <el-submenu index="2">
-                            <template slot="title">
-                                <i class="el-icon-menu"></i>
-                                <span slot="title">导航二</span>
-                            </template>
-                            <el-menu-item index="2-1">选项1</el-menu-item>
-                            <el-menu-item index="2-2">选项2</el-menu-item>
-                            <el-menu-item index="2-3">选项3</el-menu-item>
-                            <el-menu-item index="2-4">选项4</el-menu-item>
-                        </el-submenu>
-
-                        <el-menu-item index="3" :disabled='false'>
-                            <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>
-                </el-col>
-            </el-row>-->
-
             <el-row class="tac">
                 <el-col :span="3">
                     <h5>默认颜色</h5>
@@ -70,41 +18,39 @@
                         @close="handleClose"
                     >
                         <div v-for="(item) in menuData " :key="item.index">
-                            <el-submenu v-if="item.childList && item.childList.length > 0" :index="item.index">
+                            <el-submenu
+                                v-if="item.childList && item.childList.length > 0"
+                                :index="item.index"
+                            >
                                 <template slot="title">
                                     <i :class="item.iconClassName"></i>
                                     <span slot="title">{{ item.oneMenuName }}</span>
                                 </template>
-                                <el-menu-item v-for="(item1) in item.childList" :key="item1.index" :index="item1.index">{{ item1.optionName }}</el-menu-item>
+                                <el-menu-item
+                                    v-for="(item1) in item.childList"
+                                    :key="item1.index"
+                                    :index="item1.index"
+                                    :routerName="item1.routerName"
+                                    @click="onClickMenu"
+                                >{{ item1.optionName }}</el-menu-item>
                             </el-submenu>
-                            <el-menu-item v-else :index="item.index" :disabled="item.disabled">
+                            <el-menu-item
+                                v-else
+                                :index="item.index"
+                                :disabled="item.disabled"
+                                :routerName="item.routerName"
+                                @click="onClickMenu"
+                            >
                                 <i :class="item.iconClassName"></i>
                                 <span slot="title">{{ item.oneMenuName }}</span>
                             </el-menu-item>
                         </div>
-
-                        <!-- <el-submenu index="2">
-                            <template slot="title">
-                                <i class="el-icon-menu"></i>
-                                <span slot="title">导航二</span>
-                            </template>
-                            <el-menu-item index="2-1">选项1</el-menu-item>
-                            <el-menu-item index="2-2">选项2</el-menu-item>
-                            <el-menu-item index="2-3">选项3</el-menu-item>
-                            <el-menu-item index="2-4">选项4</el-menu-item>
-                        </el-submenu>
-
-                        <el-menu-item index="3" :disabled="false">
-                            <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>
                 </el-col>
+                <el-col :span="21">
+                    <div class="aa"></div>
+                    <router-view />
+                </el-col>
             </el-row>
         </section>
     </div>
@@ -123,17 +69,24 @@ export default {
             menuData
         };
     },
-    created() {
-        console.log(this.menuData);
-    },
+    created() {},
     mounted() {},
     methods: {
         onSignIn() {},
+        // 菜单展开
         handleOpen(key, keyPath) {
             console.log(key, keyPath);
         },
+        // 菜单收取
         handleClose(key, keyPath) {
             console.log(key, keyPath);
+        },
+        // 点击菜单项
+        onClickMenu(e) {
+            console.log(e.$attrs.routerName);
+            this.$router.push({
+                name: "about"
+            });
         }
     }
 };
@@ -147,6 +100,13 @@ export default {
         border: 1px solid #099;
     }
     height: 2000px;
+    .section {
+        .aa {
+            width: 100%;
+            height: 800px;
+            border: 1px solid #099;
+        }
+    }
     // border: 2px solid #f00;
 }
 </style>

src/views/Home/mencCofig.js

@@ -70,17 +70,17 @@ export const menuData = [
             {
                 optionName: '选项1',
                 index: '1-1',
-                routerName: "home"
+                routerName: "home1-1"
             },
             {
                 optionName: '选项2',
                 index: '1-2',
-                routerName: "home"
+                routerName: "home1-2"
             },
             {
                 optionName: '选项3',
                 index: '1-3',
-                routerName: "home"
+                routerName: "home1-3"
             },
             
         ]
@@ -89,7 +89,7 @@ export const menuData = [
     {
         oneMenuName: "导航二",
         iconClassName: "el-icon-document",
-        routerName: "home",
+        routerName: "home2",
         index: '2',
         disabled: false
     },
@@ -97,10 +97,35 @@ export const menuData = [
     {
         oneMenuName: "导航三",
         iconClassName: "el-icon-document",
-        routerName: "home",
+        routerName: "home3",
         index: '3',
         disabled: false,
-    }
+    },
+    // 有子菜单 字菜单不分组的
+    {
+        oneMenuName: "导航四",
+        iconClassName: "el-icon-menu",
+        index: '4',
+        disabled: false, // 是否禁用
+        childList: [ // 不分组的
+            {
+                optionName: '选项1',
+                index: '4-1',
+                routerName: "home4-1"
+            },
+            {
+                optionName: '选项2',
+                index: '4-2',
+                routerName: "home4-2"
+            },
+            {
+                optionName: '选项3',
+                index: '4-3',
+                routerName: "home4-3"
+            },
+            
+        ]
+    },
 ]
 
 // export default {menuData}