diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
index 445d28cd..a47b5d70 100644
--- a/docs/zh/guide/change-log.md
+++ b/docs/zh/guide/change-log.md
@@ -6,6 +6,9 @@
 这是正在开发的版本，还没有正式发布
 :::
 
+* [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 `数据` + `递归组件` 实现无限制多级菜单
+* [ 修改 ] 路由注册回归最简单的写法
+
 ## v1.0.0
 
 [https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0](https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0)
diff --git a/src/components/core/MainLayout/components/HeaderMenu/index.vue b/src/components/core/MainLayout/components/HeaderMenu/index.vue
index 45b9c8ad..ee54407b 100644
--- a/src/components/core/MainLayout/components/HeaderMenu/index.vue
+++ b/src/components/core/MainLayout/components/HeaderMenu/index.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import menus from '@/menu/index.js'
 export default {
   name: 'HeaderMenu',
   components: {
@@ -18,54 +19,7 @@ export default {
   },
   data () {
     return {
-      menus: [
-        {
-          path: '/index',
-          title: '首页'
-        },
-        {
-          path: '/demo',
-          title: '功能',
-          children: [
-            {
-              path: '/demo/plugins',
-              title: '插件',
-              icon: 'plug'
-            },
-            {
-              path: '/demo/components',
-              title: '组件',
-              icon: 'puzzle-piece'
-            },
-            {
-              path: '/demo/chart',
-              title: '图表',
-              icon: 'pie-chart',
-              children: [
-                {
-                  path: '/demo/plugins',
-                  title: '插件',
-                  icon: 'plug'
-                },
-                {
-                  path: '/demo/components',
-                  title: '组件',
-                  icon: 'puzzle-piece'
-                },
-                {
-                  path: '/demo/chart',
-                  title: '图表',
-                  icon: 'pie-chart'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          path: '/demo/business',
-          title: '示例业务界面'
-        }
-      ]
+      menus
     }
   }
 }
diff --git a/src/menu/index.js b/src/menu/index.js
new file mode 100644
index 00000000..c3fa639b
--- /dev/null
+++ b/src/menu/index.js
@@ -0,0 +1,79 @@
+export default [
+  {
+    path: '/index',
+    title: '首页'
+  },
+  {
+    path: '/demo',
+    title: '功能',
+    children: [
+      {
+        path: '/demo/plugins',
+        title: '插件',
+        icon: 'plug',
+        children: ((pre) => [
+          { path: `${pre}index`, title: '插件首页' },
+          { path: `${pre}build`, title: '环境区分' },
+          { path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
+          {
+            path: `${pre}export`,
+            title: '导出',
+            children: [
+              { path: `${pre}export/table`, title: '表格' },
+              { path: `${pre}export/txt`, title: '文本' }
+            ]
+          },
+          {
+            path: `${pre}i18n`,
+            title: '多国语',
+            children: [
+              { path: `${pre}i18n/demo1`, title: '示例1' },
+              { path: `${pre}i18n/demo2`, title: '示例2' }
+            ]
+          },
+          {
+            path: `${pre}import`,
+            title: '导入',
+            children: [
+              { path: `${pre}import/csv`, title: 'csv' },
+              { path: `${pre}import/xlsx`, title: 'xlsx' }
+            ]
+          },
+          { path: `${pre}js-cookie`, title: 'title' },
+          {
+            path: `${pre}layout`,
+            title: '布局',
+            children: [
+              { path: `${pre}layout/grid`, title: '可拖动卡片' },
+              { path: `${pre}layout/splitpane`, title: '分割面板' }
+            ]
+          },
+          {
+            path: `${pre}mock`,
+            title: '布局',
+            children: [
+              { path: `${pre}mock/ajax`, title: '拦截异步请求' },
+              { path: `${pre}mock/dpd`, title: 'DPD规则' },
+              { path: `${pre}mock/dtd`, title: 'DTD规则' }
+            ]
+          },
+          { path: `${pre}timeago`, title: '计算已经过去的时间' }
+        ])('/demo/plugins/')
+      },
+      {
+        path: '/demo/components',
+        title: '组件',
+        icon: 'puzzle-piece'
+      },
+      {
+        path: '/demo/chart',
+        title: '图表',
+        icon: 'pie-chart'
+      }
+    ]
+  },
+  {
+    path: '/demo/business',
+    title: '示例业务界面'
+  }
+]
diff --git a/src/pages/demo/components/container/index.vue b/src/pages/demo/components/container/index.vue
deleted file mode 100644
index 3be25510..00000000
--- a/src/pages/demo/components/container/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <Container>
-    <template slot="header">页面容器组件 文档</template>
-    <Markdown url="/static/md/组件 - 页面容器.md"></Markdown>
-  </Container>
-</template>
diff --git a/src/pages/demo/components/countup/demo.vue b/src/pages/demo/components/countup/index.vue
similarity index 100%
rename from src/pages/demo/components/countup/demo.vue
rename to src/pages/demo/components/countup/index.vue
diff --git a/src/pages/demo/components/editor/quill/demo.vue b/src/pages/demo/components/editor-quill/index.vue
similarity index 100%
rename from src/pages/demo/components/editor/quill/demo.vue
rename to src/pages/demo/components/editor-quill/index.vue
diff --git a/src/pages/demo/components/editor/quill/value.js b/src/pages/demo/components/editor-quill/value.js
similarity index 100%
rename from src/pages/demo/components/editor/quill/value.js
rename to src/pages/demo/components/editor-quill/value.js
diff --git a/src/pages/demo/components/editor/simpleMDE/demo.vue b/src/pages/demo/components/editor-simpleMDE/index.vue
similarity index 100%
rename from src/pages/demo/components/editor/simpleMDE/demo.vue
rename to src/pages/demo/components/editor-simpleMDE/index.vue
diff --git a/src/pages/demo/components/editor/simpleMDE/text.js b/src/pages/demo/components/editor-simpleMDE/text.js
similarity index 100%
rename from src/pages/demo/components/editor/simpleMDE/text.js
rename to src/pages/demo/components/editor-simpleMDE/text.js
diff --git a/src/pages/demo/components/highlight/demo.vue b/src/pages/demo/components/highlight/index.vue
similarity index 100%
rename from src/pages/demo/components/highlight/demo.vue
rename to src/pages/demo/components/highlight/index.vue
diff --git a/src/pages/demo/components/markdown/doc.vue b/src/pages/demo/components/markdown/doc.vue
deleted file mode 100644
index e83493d8..00000000
--- a/src/pages/demo/components/markdown/doc.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="文档">
-    </PageHeader>
-    <markdown url="/static/md/组件 - markdown - 文档.md"></markdown>
-  </Container>
-</template>
\ No newline at end of file
diff --git a/src/pages/demo/components/markdown/demo.vue b/src/pages/demo/components/markdown/index.vue
similarity index 100%
rename from src/pages/demo/components/markdown/demo.vue
rename to src/pages/demo/components/markdown/index.vue
diff --git a/src/pages/demo/plugins/i18n/doc.vue b/src/pages/demo/plugins/i18n/doc.vue
deleted file mode 100644
index 27c8f52c..00000000
--- a/src/pages/demo/plugins/i18n/doc.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="使用方法"
-      url="http://kazupon.github.io/vue-i18n/en/">
-    </PageHeader>
-    <Markdown url="/static/md/插件 - 多国语.md"></Markdown>
-  </Container>
-</template>
diff --git a/src/router/index.js b/src/router/index.js
index 112d50f1..355e133e 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,6 +19,28 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/demo/components',
+    name: 'demo-components',
+    meta: { requiresAuth: true },
+    redirect: { name: 'demo-components-index' },
+    component: () => import('@/components/core/MainLayout/index.vue'),
+    children: ((pre) => [
+      { path: 'container/full', name: `${pre}container-full`, component: () => import('@/pages/demo/components/container/full.vue') },
+      { path: 'container/ghost', name: `${pre}container-ghost`, component: () => import('@/pages/demo/components/container/ghost.vue') },
+      { path: 'container/normal', name: `${pre}container-normal`, component: () => import('@/pages/demo/components/container/normal.vue') },
+      { path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup/index.vue') },
+      { path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill/index.vue') },
+      { path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE/index.vue') },
+      { path: 'highlight', name: `${pre}highlight`, component: () => import('@/pages/demo/components/highlight/index.vue') },
+      { path: 'icon/icon', name: `${pre}icon-icon`, component: () => import('@/pages/demo/components/icon/icon.vue') },
+      { path: 'icon/list', name: `${pre}icon-list`, component: () => import('@/pages/demo/components/icon/list.vue') },
+      { path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue') },
+      { path: 'icon/svg', name: `${pre}icon-svg`, component: () => import('@/pages/demo/components/icon/svg.vue') },
+      { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index/index.vue') },
+      { path: 'markdown', name: `${pre}markdown`, component: () => import('@/pages/demo/components/markdown/index.vue') }
+    ])('demo-components-')
+  },
   {
     path: '/demo/plugins',
     name: 'demo-plugins',
@@ -32,7 +54,6 @@ const routes = [
       { path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue') },
       { path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue') },
       { path: 'i18n/demo2', name: `${pre}i18n-demo2`, component: () => import('@/pages/demo/plugins/i18n/demo2.vue') },
-      { path: 'i18n/doc', name: `${pre}i18n-doc`, component: () => import('@/pages/demo/plugins/i18n/doc.vue') },
       { path: 'import/csv', name: `${pre}import-csv`, component: () => import('@/pages/demo/plugins/import/csv.vue') },
       { path: 'import/xlsx', name: `${pre}import-xlsx`, component: () => import('@/pages/demo/plugins/import/xlsx.vue') },
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/plugins/index/index.vue') },
@@ -53,7 +74,9 @@ const routes = [
   }
 ]
 
-console.log(routes)
+routes[2].children.forEach(e => {
+  console.log(`{ path: \`\${pre}${e.path}\`, title: 'title' }`)
+})
 
 let router = new VueRouter({ routes })