提交代码

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

@@ -4,16 +4,25 @@ const routes = {
   component: {
     template: '<router-view></router-view>'
   },
+  meta: {
+    icon: 'mdi-test-tube'
+  },
   children: [
     {
       path: 'about',
       name: 'About',
-      component: () => import('@/views/test/About.vue')
+      component: () => import('@/views/test/About.vue'),
+      meta: {
+        icon: 'mdi-information-variant'
+      }
     },
     {
       path: 'home',
       name: 'Home',
-      component: () => import('@/views/test/Home.vue')
+      component: () => import('@/views/test/Home.vue'),
+      meta: {
+        icon: 'mdi-home'
+      }
     }
   ]
 }

vue-demo/src/views/auth/Login.vue

@@ -7,7 +7,9 @@
         dashboards full of beautiful and feature rich modules.
       </p>
       <p>
-        <v-btn align="left" color="#2B81D6" class="white--text" outlined>Learn More</v-btn>
+        <v-btn align="left" color="#2B81D6" class="white--text" outlined
+          >Learn More</v-btn
+        >
       </p>
     </div>
     <!-- <v-col cols="12" sm="6" md="8" class="info justify-center">
@@ -60,13 +62,12 @@
           </div>
         </v-card-title>
         <v-card-text>
-          <form @submit.prevent="submit">
+          <form>
             <v-row>
               <v-col>
                 <v-text-field
-                  v-model="name"
+                  name="username"
                   :rules="[rules.required]"
-                  :error-messages="errors"
                   label="E-mail"
                   outlined
                   required
@@ -78,7 +79,7 @@
                 <v-text-field
                   :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                   :type="show ? 'text' : 'password'"
-                  name="input-10-2"
+                  name="password"
                   label="Password"
                   outlined
                   value
@@ -89,8 +90,7 @@
             <v-row align="center">
               <v-col align="left">
                 <v-checkbox
-                  v-model="checkbox"
-                  :error-messages="errors"
+                  v-model="remember"
                   value="1"
                   label="Remember me?"
                   type="checkbox"
@@ -104,9 +104,11 @@
             <v-row>
               <v-col>
                 <v-btn
-                  class="mr-4"
+                  class="ma-2"
                   type="submit"
-                  :disabled="invalid"
+                  :loading="loading"
+                  :disabled="loading"
+                  @click="loader = 'loading'"
                   color="primary"
                   block
                   >SIGN IN</v-btn
@@ -130,12 +132,30 @@
 export default {
   data () {
     return {
+      loader: null,
+      loading: null,
       show: false,
+      remember: false,
       password: 'Password',
       rules: {
         required: value => !!value || 'Required.',
-        emailMatch: () => 'The email and password you entered don\'t match'
+        emailMatch: () => "The email and password you entered don't match"
+      }
+    }
+  },
+  watch: {
+    loader () {
+      const l = this.loader
+      this[l] = !this[l]
+
+      setTimeout(() => (this[l] = false), 3000)
+
+      this.loader = null
     }
+  },
+  methods: {
+    submit () {
+
     }
   }
 }
@@ -177,4 +197,40 @@ export default {
     }
   }
 }
+.custom-loader {
+  animation: loader 1s infinite;
+  display: flex;
+}
+@-moz-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

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">
+          <!-- 如果route的children不为空，则组成list-group -->
           <template v-if="route.children">
             <v-list-group :key="index">
               <template v-slot:activator>
+                <v-list-item-action>
+                  <v-icon>{{ route.meta.icon }}</v-icon>
+                </v-list-item-action>
                 <v-list-item-content>
-                  <v-list-item-title v-text="route.name" ripple></v-list-item-title>
+                  <v-list-item-title
+                    v-text="route.name"
+                    ripple
+                  ></v-list-item-title>
                 </v-list-item-content>
               </template>
               <v-list-item
@@ -16,16 +24,21 @@
                 :key="idx"
                 :to="{ name: cRoute.name }"
               >
-                <v-list-item-action> </v-list-item-action>
+                <v-list-item-action>
+                  <v-icon>{{ cRoute.meta.icon }}</v-icon>
+                </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>
+           <!-- 如果route的children为空，则直接已list-item形式展示即可 -->
           <template v-else>
             <v-list-item :key="index" :to="{ name: route.name }">
-              <v-list-item-action> </v-list-item-action>
+              <v-list-item-action>
+                <v-icon>{{ route.meta.icon }}</v-icon>
+              </v-list-item-action>
               <v-list-item-content>
                 <v-list-item-title v-text="route.name"></v-list-item-title>
               </v-list-item-content>
@@ -34,16 +47,33 @@
         </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-spacer></v-spacer>
+      <v-menu offset-y>
+        <template v-slot:activator="{ attrs, on }">
+          <v-btn v-bind="attrs" v-on="on" plain>
+            username
+            <v-icon>
+              mdi-menu-down
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item v-for="item in items" :key="item" link>
+            <v-list-item-title v-text="item"></v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-app-bar>
-
     <v-main>
       <router-view />
     </v-main>
+    <!-- 页面底部部分 -->
     <v-footer app>
+      <v-spacer></v-spacer>
       <span class="black--text">&copy; {{ new Date().getFullYear() }}</span>
     </v-footer>
   </v-app>
@@ -53,7 +83,8 @@
 export default {
   data () {
     return {
-      drawer: null
+      drawer: null,
+      items: ['reset password', 'quit']
     }
   },
   computed: {

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

@@ -11,7 +11,7 @@ export default {
     }
   },
   beforeCreate () {
-    console.log(this.$router)
+    console.log(this.$route)
   }
 }
 </script>