feat: 支持菜单层级

Author: FairyEver

src/layouts/default.vue

@@ -4,6 +4,8 @@
   .layout-main--side {
     width: 200px;
     background-color: #051428;
+    user-select: none;
+    cursor: pointer;
     .el-menu {
       border-right: none;
       .el-menu-item {
@@ -16,34 +18,37 @@
 }
 </style>
 
-<template>
-  <div class="layout-main" flex="dir:left">
-    <div class="layout-main--side" flex-box="0">
-      <el-menu
-        :default-active="$route.path"
-        background-color="#051428"
-        text-color="#969CA5"
-        active-text-color="#FFF"
-        router>
-        <el-menu-item
-          v-for="menu of menus"
-          :key="menu.path"
-          :index="menu.path">
-          {{ menu.title }}
-        </el-menu-item>
-      </el-menu>
-    </div>
-    <div flex-box="1">
-      <router-view/>
-    </div>
-  </div>
-</template>
-
 <script>
 import { menus } from '@/router'
 
 export default {
   name: 'layout-main',
+  render () {
+    const createMenu = menu => menu.children ? createGroup(menu) : createItem(menu)
+    const createItem = menu => <el-menu-item index={ menu.path }>{ menu.title }</el-menu-item>
+    const createGroup = menu =>
+      <el-submenu index={ menu.path }>
+        <template slot="title">{ menu.title }</template>
+        { menu.children.map(child => createMenu(child)) }
+      </el-submenu>
+    const node =
+      <div class="layout-main" flex="dir:left">
+        <div class="layout-main--side" flex-box="0">
+          <el-menu
+            default-active={ this.$route.path }
+            background-color="#051428"
+            text-color="#969CA5"
+            active-text-color="#FFF"
+            router>
+            { this.menus.map(menu => createMenu(menu)) }
+          </el-menu>
+        </div>
+        <div flex-box="1">
+          <router-view/>
+        </div>
+      </div>
+    return node
+  },
   data () {
     return {
       menus

src/pages/about.vue

@@ -0,0 +1,9 @@
+<route-meta>
+{
+  "title": "DEMO FOLDER 1"
+}
+</route-meta>
+
+<template>
+  <router-view/>
+</template>

src/pages/demo1.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 1-1"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo1/1.vue

@@ -0,0 +1,11 @@
+<route-meta>
+{
+  "title": "DEMO 1-2"
+}
+</route-meta>
+
+<template>
+  <div>
+    {{ $route.name }}
+  </div>
+</template>

src/pages/demo1/2.vue

@@ -2,13 +2,25 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import routes from 'vue-auto-routing'
 import { createRouterLayout } from 'vue-router-layout'
+import { concat } from 'lodash'
 
 Vue.use(Router)
 
 const RouterLayout = createRouterLayout(layout => {
   return import('@/layouts/' + layout + '.vue')
 })
 
+function routes2menus (routes, parentPaths = []) {
+  return routes.map(route => {
+    const menu = {}
+    const newParentPaths = concat(parentPaths, route.path)
+    menu.path = newParentPaths.join('/')
+    menu.title = route.meta.title
+    if (route.children) menu.children = routes2menus(route.children, newParentPaths)
+    return menu
+  })
+}
+
 export const router = new Router({
   routes: [
     {
@@ -19,7 +31,4 @@ export const router = new Router({
   ]
 })
 
-export const menus = routes.map(route => ({
-  path: route.path,
-  title: route.meta.title
-}))
+export const menus = routes2menus(routes)