1. 修改路由嵌套方式

.gitignore

@@ -0,0 +1 @@
+node_modules

src/assets/js/menus.js

@@ -0,0 +1,67 @@
+export default [
+  {
+    icon: 'icon-dianziqianmingguanli_huaban1',
+    text: '邮件签名制作',
+    url: '/main/mailSignature',
+    show: true,
+  },
+  {
+    icon: 'icon-dayintaodabiaoqian',
+    text: '标签套打',
+    url: '/main/repeatPrint',
+    show: true,
+  },
+  {
+    icon: 'icon-fuwenbenkuang',
+    text: '富文本框',
+    url: '/main/richTextBox',
+    show: false,
+  },
+  {
+    icon: 'icon-haibao',
+    text: '海报制作',
+    url: '/main/posterMake',
+    show: false,
+  },
+  {
+    icon: 'icon-chuankou',
+    text: '串口通讯',
+    url: '/main/serial',
+    show: true,
+  },
+  {
+    icon: 'icon-shebeikaifa',
+    text: '布局方式',
+    children: [
+      {
+        icon: 'icon-shebeikaifa',
+        text: '双飞翼',
+        children: [],
+        url: '/main/layouts/shuangfeiyi',
+        show: true,
+      },
+      {
+        icon: 'icon-shebeikaifa',
+        text: '圣杯',
+        children: [],
+        url: '/main/layouts/shengbei',
+        show: true,
+      },
+      {
+        icon: 'icon-shebeikaifa',
+        text: '瀑布流',
+        children: [],
+        url: '/main/layouts/pubuliu',
+        show: true,
+      },
+    ],
+    url: '/main/layouts',
+    show: true,
+  },
+  {
+    icon: 'icon-shebeikaifa',
+    text: '开发模版',
+    url: '/template',
+    show: false,
+  },
+];

src/router/index.js

@@ -15,7 +15,7 @@ const routes = [
     component: () => import('@/views/main.vue'),
     children: [
       {
-        path: '/mailSignature',
+        path: 'mailSignature',
         name: 'MailSignature',
         component: () => import('@/views/mailSignature.vue'),
         meta: {
@@ -23,7 +23,7 @@ const routes = [
         },
       },
       {
-        path: '/repeatPrint',
+        path: 'repeatPrint',
         name: 'RepeatPrint',
         component: () => import('@/views/repeatPrint.vue'),
         meta: {
@@ -31,7 +31,7 @@ const routes = [
         },
       },
       {
-        path: '/richTextBox',
+        path: 'richTextBox',
         name: 'RichTextBox',
         component: () => import('@/views/richTextBox.vue'),
         meta: {
@@ -39,7 +39,7 @@ const routes = [
         },
       },
       {
-        path: '/posterMake',
+        path: 'posterMake',
         name: 'PosterMake',
         component: () => import('@/views/posterMake.vue'),
         meta: {
@@ -47,7 +47,7 @@ const routes = [
         },
       },
       {
-        path: '/serial',
+        path: 'serial',
         name: 'Serial',
         component: () => import('@/views/serial.vue'),
         meta: {
@@ -55,13 +55,47 @@ const routes = [
         },
       },
       {
-        path: '/template',
+        path: 'template',
         name: 'Template',
         component: () => import('@/views/template.vue'),
         meta: {
           title: '开发模板',
         },
       },
+      {
+        path: 'layouts',
+        name: 'Layout',
+        component: () => import('@/views/template.vue'),
+        children: [
+          {
+            path: 'pubuliu',
+            name: 'Pubuliu',
+            component: () => import('@/views/layouts/pubuliu.vue'),
+            meta: {
+              title: '瀑布流',
+            },
+          },
+          {
+            path: 'shuangfeiyi',
+            name: 'Shuangfeiyi',
+            component: () => import('@/views/layouts/shuangfeiyi.vue'),
+            meta: {
+              title: '双飞翼',
+            },
+          },
+          {
+            path: 'shengbei',
+            name: 'Shengbei',
+            component: () => import('@/views/layouts/shengbei.vue'),
+            meta: {
+              title: '圣杯',
+            },
+          },
+        ],
+        meta: {
+          title: '开发模板',
+        },
+      },
     ],
   },
 ];

src/views/layouts/pubuliu.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div class="toolsbox"></div>
+    <div class="content"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pubuliu',
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  computed: {},
+  mounted() {},
+};
+</script>
+<style scoped lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: pink;
+}
+</style>

src/views/layouts/shengbei.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div class="toolsbox"></div>
+    <div class="content">123123</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'shengbei',
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  computed: {},
+  mounted() {},
+};
+</script>
+<style scoped lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: pink;
+}
+</style>

src/views/layouts/shuangfeiyi.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div class="toolsbox"></div>
+    <div class="content"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Shuangfeiyi',
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  computed: {},
+  mounted() {},
+};
+</script>
+<style scoped lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: pink;
+}
+</style>

src/views/menu.vue

@@ -7,7 +7,7 @@
         :key="item.text"
         @click="
           () => {
-            menuClick(item.url);
+            menuClick(item);
           }
         "
         :style="{ backgroundColor: colors[index % colors.length] }"
@@ -16,59 +16,54 @@
         <span class="text">{{ item.text }}</span>
       </div>
     </template>
+    <el-dialog title="提示" :visible.sync="childMenuVisible" width="70%">
+      <div class="dialogContainer">
+        <template v-for="(item, index) in childMenuList">
+          <div
+            v-if="item.show"
+            class="menu"
+            :key="item.text"
+            @click="
+              () => {
+                menuClick(item);
+              }
+            "
+            :style="{ backgroundColor: colors[index % colors.length] }"
+          >
+            <span :class="'iconfont ' + item.icon"></span>
+            <span class="text">{{ item.text }}</span>
+          </div>
+        </template>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="childMenuVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="childMenuVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import menuList from '../assets/js/menus';
 export default {
   name: 'Menu',
   props: {},
   data() {
     return {
       colors: ['#a6c2ce', '#9c8f96', '#ebc57c', '#6b799e'],
-      menuList: [
-        {
-          icon: 'icon-dianziqianmingguanli_huaban1',
-          text: '邮件签名制作',
-          url: '/mailSignature',
-          show: true,
-        },
-        {
-          icon: 'icon-dayintaodabiaoqian',
-          text: '标签套打',
-          url: '/repeatPrint',
-          show: true,
-        },
-        {
-          icon: 'icon-fuwenbenkuang',
-          text: '富文本框',
-          url: '/richTextBox',
-          show: false,
-        },
-        {
-          icon: 'icon-haibao',
-          text: '海报制作',
-          url: '/posterMake',
-          show: false,
-        },
-        {
-          icon: 'icon-chuankou',
-          text: '串口通讯',
-          url: '/serial',
-          show: true,
-        },
-        {
-          icon: 'icon-shebeikaifa',
-          text: '开发模版',
-          url: '/template',
-          show: false,
-        },
-      ],
+      menuList: menuList,
+      childMenuVisible: false,
+      childMenuList: [],
     };
   },
   methods: {
-    menuClick(url) {
-      this.$router.push(url);
+    menuClick(item) {
+      if (item.children && item.children.length) {
+        this.childMenuList = item.children;
+        this.childMenuVisible = true;
+      } else {
+        this.$router.push(item.url);
+      }
     },
   },
 };
@@ -79,7 +74,7 @@ export default {
   height: 100%;
   padding: 50px;
   box-sizing: border-box;
-  > .menu {
+  .menu {
     background-color: #a6c2ce;
     width: 100px;
     height: 100px;
@@ -105,5 +100,11 @@ export default {
       margin-top: 5px;
     }
   }
+
+  .dialogContainer {
+    padding: 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
 }
 </style>