提交代码

vue-demo/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import test from './modules/test'
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
     name: 'Login',
-    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/auth/Login.vue')
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/login',
+    name: 'Login',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "Login" */ '../views/auth/Login.vue')
   },
   {
-    path: '/login',
-    name: 'Login',
+    path: '/index',
+    name: 'AppLayout',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
+    component: () => import(/* webpackChunkName: "AppLayout" */ '../views/layouts/AppLayout.vue'),
+    children: [
+      test
+    ]
   }
 ]
 

vue-demo/src/router/modules/test.js

+const routes = {
+  path: '/test',
+  name: 'Test',
+  component: {
+    template: '<router-view></router-view>'
+  },
+  children: [
+    {
+      path: 'about',
+      name: 'About',
+      component: () => import('@/views/test/About.vue')
+    },
+    {
+      path: 'home',
+      name: 'Home',
+      component: () => import('@/views/test/Home.vue')
+    }
+  ]
+}
+
+export default routes

vue-demo/src/views/layouts/AppLayout.vue

+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer v-model="drawer" app>
+      <!-- 第五行app去掉后，整个工具栏延伸到左侧导航菜单上方 -->
+      <v-list expand dense>
+        <template v-for="(route, index) in routes">
+          <template v-if="route.children">
+            <v-list-group :key="index">
+              <template v-slot:activator>
+                <v-list-item-content>
+                  <v-list-item-title v-text="route.name" ripple></v-list-item-title>
+                </v-list-item-content>
+              </template>
+              <v-list-item
+                v-for="(cRoute, idx) in route.children"
+                :key="idx"
+                :to="{ name: cRoute.name }"
+              >
+                <v-list-item-action> </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title v-text="cRoute.name"></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-group>
+          </template>
+          <template v-else>
+            <v-list-item :key="index" :to="{ name: route.name }">
+              <v-list-item-action> </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title v-text="route.name"></v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </template>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar app>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+    </v-main>
+    <v-footer app>
+      <span class="black--text">&copy; {{ new Date().getFullYear() }}</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      drawer: null
+    }
+  },
+  computed: {
+    routes () {
+      const routeName = this.$route.name
+      const { routes } = this.$router.options
+
+      try {
+        for (let i = 0, len = routes.length; i < len; i += 1) {
+          if (routes[i].children) {
+            for (let j = 0, len = routes[i].children.length; j < len; j += 1) {
+              const child = routes[i].children[j]
+              if (child.name === routeName) {
+                return routes[i].children
+              }
+            }
+          } else if (routes[i].name === routeName) {
+            return routes[i]
+          }
+        }
+      } catch (err) {
+        console.log('>>>sidebar', err)
+      }
+
+      return routes[2].children
+    }
+  }
+}
+</script>

vue-demo/src/views/About.vue → vue-demo/src/views/test/About.vue

@@ -3,3 +3,15 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  beforeCreate () {
+    console.log(this.$router)
+  }
+}
+</script>

vue-demo/vue.config.js

 module.exports = {
   transpileDependencies: [
     'vuetify'
-  ]
+  ],
+  runtimeCompiler: true
 }