admin-2025-02-14 10:06:19

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/LoginView.vue'
 
 const routes = [
   {
@@ -8,14 +9,9 @@ const routes = [
     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: function () {
-    //   return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-    // }
+    path: '/login',
+    name: 'login',
+    component: LoginView
   }
 ]
 

src/views/HomeView.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="home">
     <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
+    <button @click="goToLogin">GO TO LOGIN</button>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'HomeView',
-}
+  methods: {
+    goToLogin() {
+      this.$router.push('/login');
+    }
+  }
+};
 </script>
-<style>
+
+<style scoped>
 .home {
   height: 100vh;
   width: 100vw;

src/views/LoginView.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <h2>Login</h2>
+    <form @submit.prevent="login">
+      <label for="username">Username2:</label>
+      <input id="username" v-model="username" type="text" required>
+      <br><br>
+      <label for="password">Password:</label>
+      <input id="password" v-model="password" type="password" required>
+      <br><br>
+      <label for="rememberMe">Remember Me:</label>
+      <input id="rememberMe" v-model="rememberMe" type="checkbox">
+      <br><br>
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    };
+  },
+  methods: {
+    login() {
+      alert(`Logging in as ${this.username} with remember me set to ${this.rememberMe}`);
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Add your styles here */
+</style>