login

src/router/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/home',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // 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/AboutView.vue')
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('../views/login/Login.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/views/HomeView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="home">
+    <h1>Home</h1>
+    <p>Home page content</p>
   </div>
 </template>
 

src/views/login/Login.vue

@@ -21,26 +21,26 @@
                             <form>
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+                                        <input type="text" class="form-control" id="floatingInput" placeholder="账号" v-model="username">
-                                        <label for="floatingInput">Email address</label>
+                                        <label for="floatingInput">账号</label>
                                       </div>
                                 </div>
                                 <div class="mb-3">
                                     <div class="form-floating">
-                                        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+                                        <input type="password" class="form-control" id="floatingPassword" placeholder="密码" v-model="passward">
-                                        <label for="floatingPassword">Password</label>
+                                        <label for="floatingPassword">密码</label>
                                       </div>
                                 </div>
-                                <div class="mb-3 form-check">
+                                <!-- <div class="mb-3 form-check">
                                   <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                   <label class="form-check-label" for="exampleCheck1">Check me out</label>
-                                </div>
+                                </div> -->
                                 <div class="d-grid">
-                                <button type="submit" class="btn btn-info m-b-xs">Sign In</button>
+                                <button type="submit" class="btn btn-info m-b-xs" @click="submit(username,passward)">登录</button>
                             </div>
                               </form>
                               <div class="authent-reg">
-                                  <p>Not registered? <a href="register.html">Create an account</a></p>
+                                  <p>Not registered? <a href="register.html">Create</a></p>
                               </div>
                         </div>
                     </div>
@@ -60,12 +60,23 @@ export default {
     name: 'Login',
     data() {
         return {
-            active: 'login-page'
+            active: 'login-page',
+            username: '',
+            passward :''
         }
     },
     mounted() {
         this.active = 'login-page no-loader'
     },
+    methods: {
+        submit(username,passward){
+            if(username == 'admin' && passward == '123456'){
+                this.$router.replace('/home')
+            }else{
+                alert('账号或密码错误')
+            }
+        }
+    },
 }
 </script>
 <style>
@@ -73,5 +84,4 @@ export default {
 @import '../../assets/plugins/font-awesome/css/all.min.css';
 @import '../../assets/plugins/perfectscroll/perfect-scrollbar.css';
 @import '../../assets/css/main.min.css';
-@import '../../assets/css/custom.css';
 </style>