左侧菜单栏优化

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <a-layout id="components-layout-demo-custom-trigger">
     <a-affix :offset-top="0">
-      <h-layout-sider :collapsed="collapsed" />
+      <h-layout-sider :collapsed="collapsed" @change="sider" />
     </a-affix>
 
     <a-layout class="box">
@@ -12,6 +12,7 @@
             :type="collapsed ? 'menu-unfold' : 'menu-fold'"
             @click="() => (collapsed = !collapsed)"
           />
+          {{ title }}
         </a-layout-header>
       </a-affix>
 
@@ -25,8 +26,29 @@
 export default {
   data() {
     return {
-      collapsed: false
+      collapsed: false,
+      title: ""
     };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.sider();
+    }, 200);
+  },
+  methods: {
+    sider() {
+      console.log(34);
+      console.log(
+        // this.$router,
+        this.$route
+        // this.$route.meta.title
+      );
+      if (this.$route.meta && this.$route.meta.title) {
+        this.title = this.$route.meta.title;
+      } else {
+        this.title = this.$route.path;
+      }
+    }
   }
 };
 </script>

src/components/layout/h-layout-sider.vue

@@ -94,6 +94,16 @@ export default {
               children: [{ key: "3.1.1", title: "3.1.1" }]
             }
           ]
+        },
+        {
+          key: "4",
+          title: "第四章",
+          children: [
+            {
+              key: "4.1",
+              title: "4.1"
+            }
+          ]
         }
       ]
     };
@@ -101,6 +111,7 @@ export default {
   components: {
     "sub-menu": SubMenu
   },
+
   methods: {
     toggleCollapsed() {
       this.collapsed = !this.collapsed;
@@ -109,6 +120,7 @@ export default {
       console.log("titleClick", e);
       console.log(`/chapter${e.key}`);
       this.$router.push({ path: `/chapter${e.key}` });
+      this.$emit("change");
     }
   }
 };

src/pages/chapter4/4.1.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    4.1
+  </div>
+</template>

src/pages/chapter4/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    第四章
+  </div>
+</template>

src/router/index.js

@@ -40,6 +40,17 @@ export default new Router({
       path: "/chapter3.1.1",
       name: "chapter3.1.1",
       component: () => import("@/pages/chapter3/3.1.1")
+    },
+    {
+      path: "/chapter4",
+      name: "chapter4",
+      component: () => import("@/pages/chapter4/index")
+    },
+    {
+      path: "/chapter4.1",
+      name: "chapter4.1",
+      component: () => import("@/pages/chapter4/4.1"),
+      meta: { title: "栈", auth: false }
     }
   ]
 });