优化登录跳转规则

src/pages/index/ChatPage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="hello">
+    <el-input placeholder="请输入用户名" v-model="username" clearable>
+    </el-input>
+    <el-input
+      placeholder="请输入密码"
+      v-model="password"
+      show-password
+    ></el-input>
+    <el-button
+      class="login-button"
+      type="primary"
+      native-type="submit"
+      @click="handleLogout"
+    >
+      退出
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChatPage",
+  props: {},
+  data() {
+    return {
+      username: "",
+      password: "",
+    };
+  },
+  methods: {
+    handleLogout() {
+      this.$store.commit("SET_TOKEN", '');
+      this.$store.commit("SET_USERNAME", '');
+      this.$router.push("/login");
+    },
+  },
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/pages/index/IndexPage.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="hello">
-    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
-    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "IndexPage",
-  props: {
-    
-  },
-  data() {
-    return {
-      username: '',
-      password: ''
-    }
-  }
-};
-</script>
-
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/pages/login/LoginPage.vue

@@ -40,15 +40,29 @@ export default {
   name: "LoginPage",
   data() {
     return {
-      username: '',
-      password: ''
-    }
+      username: "",
+      password: "",
+    };
   },
   methods: {
     handleLogin() {
-      // 登录接口接入后在这里提交账号和密码。
+      // 登录接口接入后在这里提交账号和密码
+      // 这里模拟登录成功，直接跳转到聊天页面
+      if (this.username && this.password) {
+        this.$store.commit("SET_TOKEN", "mock-token");
+        this.$store.commit("SET_USERNAME", this.username);
+        this.$router.push("/chat");
+      } else {
+        this.$message.error("请输入账号和密码");
+      }
+    },
+  },
+  mounted() {
+    // 如果已经登录过，直接跳转到聊天页面
+    if (this.$store.state.token) {
+      this.$router.push("/chat");
     }
-  }
+  },
 };
 </script>
 
@@ -56,7 +70,11 @@ export default {
 .login-page {
   align-items: center;
   background: #eef5f3;
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
+  background-image: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8),
+    rgba(211, 235, 229, 0.75)
+  );
   display: flex;
   justify-content: center;
   min-height: 100vh;