diff --git a/src/components/core/d2-layout-main/components/-header-menu/index.vue b/src/components/core/d2-layout-main/components/-header-menu/index.vue
index 33566167..a0c5943d 100644
--- a/src/components/core/d2-layout-main/components/-header-menu/index.vue
+++ b/src/components/core/d2-layout-main/components/-header-menu/index.vue
@@ -12,10 +12,10 @@
 <script>
 import menus from '@/menu/index.js'
 export default {
-  name: 'd2-layout-main-header-menu',
+  name: 'd2-layout-main-menu-header',
   components: {
     'd2-menu-item': () => import('../d2-menu-item/index.vue'),
-    'd2-sub-menu': () => import('../d2-sub-menu/index.vue')
+    'd2-menu-sub': () => import('../d2-menu-sub/index.vue')
   },
   data () {
     return {
diff --git a/src/components/core/d2-layout-main/components/-menu-header/index.vue b/src/components/core/d2-layout-main/components/-menu-header/index.vue
new file mode 100644
index 00000000..b8a2c4e2
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-menu-header/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-menu
+    mode="horizontal"
+    :router="true">
+    <template v-for="(menu, menuIndex) in menus">
+      <d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+      <d2-submenu v-else :menu="menu" :key="menuIndex"/>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+import menus from '@/menu/index.js'
+export default {
+  name: 'd2-layout-main-menu-header',
+  components: {
+    'd2-menu-item': () => import('../-menu-item/index.vue'),
+    'd2-menu-sub': () => import('../-menu-sub/index.vue')
+  },
+  data () {
+    return {
+      menus
+    }
+  }
+}
+</script>
diff --git a/src/components/core/d2-layout-main/components/d2-menu-item/index.vue b/src/components/core/d2-layout-main/components/-menu-item/index.vue
similarity index 100%
rename from src/components/core/d2-layout-main/components/d2-menu-item/index.vue
rename to src/components/core/d2-layout-main/components/-menu-item/index.vue
diff --git a/src/components/core/d2-layout-main/components/-menu-side/index.vue b/src/components/core/d2-layout-main/components/-menu-side/index.vue
new file mode 100644
index 00000000..fabc6a3d
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-menu-side/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-menu
+      :collapse="collapse"
+      :unique-opened="true"
+      :router="true">
+      <template v-for="(menu, menuIndex) in menus">
+        <d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+        <d2-submenu v-else :menu="menu" :key="menuIndex"/>
+      </template>
+    </el-menu>
+    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
+      没有菜单
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { side } from '@/menu/index.js'
+export default {
+  name: 'd2-layout-main-menu-side',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  components: {
+    'd2-menu-item': () => import('../-menu-item/index.vue'),
+    'd2-menu-sub': () => import('../-menu-sub/index.vue')
+  },
+  data () {
+    return {
+      menus: []
+    }
+  },
+  watch: {
+    '$route.matched': {
+      handler (val) {
+        const path = val[0].path
+        this.menus = side.filter(menu => menu.path === path)
+      },
+      immediate: true
+    }
+  }
+}
+</script>
diff --git a/src/components/core/d2-layout-main/components/d2-sub-menu/index.vue b/src/components/core/d2-layout-main/components/-menu-sub/index.vue
similarity index 87%
rename from src/components/core/d2-layout-main/components/d2-sub-menu/index.vue
rename to src/components/core/d2-layout-main/components/-menu-sub/index.vue
index 694b16ae..029b63be 100644
--- a/src/components/core/d2-layout-main/components/d2-sub-menu/index.vue
+++ b/src/components/core/d2-layout-main/components/-menu-sub/index.vue
@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'd2-sub-menu',
+  name: 'd2-menu-sub',
   props: {
     menu: {
       type: Object,
@@ -22,7 +22,7 @@ export default {
     }
   },
   components: {
-    'd2-menu-item': () => import('../d2-menu-item/index.vue')
+    'd2-menu-item': () => import('../-menu-item/index.vue')
   }
 }
 </script>
diff --git a/src/components/core/d2-layout-main/components/-side-menu/index.vue b/src/components/core/d2-layout-main/components/-side-menu/index.vue
index 528e8095..0cd841b9 100644
--- a/src/components/core/d2-layout-main/components/-side-menu/index.vue
+++ b/src/components/core/d2-layout-main/components/-side-menu/index.vue
@@ -9,7 +9,7 @@
         <d2-submenu v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-side-menu-empty">
+    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
       没有菜单
     </div> -->
   </div>
@@ -18,7 +18,7 @@
 <script>
 import { side } from '@/menu/index.js'
 export default {
-  name: 'd2-layout-main-side-menu',
+  name: 'd2-layout-main-menu-side',
   props: {
     collapse: {
       type: Boolean,
@@ -28,7 +28,7 @@ export default {
   },
   components: {
     'd2-menu-item': () => import('../d2-menu-item/index.vue'),
-    'd2-sub-menu': () => import('../d2-sub-menu/index.vue')
+    'd2-menu-sub': () => import('../d2-menu-sub/index.vue')
   },
   data () {
     return {
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index 51cf125f..c4b081ab 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -9,14 +9,14 @@
       <div class="toggle-aside-btn" @click="collapse = !collapse">
         <d2-icon name="bars"/>
       </div>
-      <d2-layout-main-header-menu/>
+      <d2-layout-main-menu-header/>
       <d2-layout-main-header-right/>
     </el-header>
     <!-- 下面 主体 -->
     <el-container>
       <!-- 主体 侧边栏 -->
       <el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-        <d2-layout-main-side-menu :collapse="collapse"/>
+        <d2-layout-main-menu-side :collapse="collapse"/>
       </el-aside>
       <!-- 主体 -->
       <el-main>
@@ -32,8 +32,8 @@
 export default {
   name: 'd2-layout-main',
   components: {
-    'd2-layout-main-side-menu': () => import('./components/side-menu'),
-    'd2-layout-main-header-menu': () => import('./components/-header-menu'),
+    'd2-layout-main-menu-side': () => import('./components/-menu-side'),
+    'd2-layout-main-menu-header': () => import('./components/-menu-header'),
     'd2-layout-main-header-right': () => import('./components/-header-right')
   },
   data () {