vue3 登录页面

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const error = ref(null);
    const router = useRouter();

    const handleLogin = async () => {
      try {
        // 这里可以添加你的登录逻辑，例如调用API进行验证
        if (username.value === 'admin' && password.value === '123456') {
          // 登录成功，跳转到主页或其他页面
          router.push('/dashboard');
        } else {
          // 登录失败，显示错误信息
          error.value = '用户名或密码错误';
        }
      } catch (err) {
        error.value = '登录失败，请重试';
      }
    };

    return {
      username,
      password,
      error,
      handleLogin,
    };
  },
};
</script>

<style scoped>
.login-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 创建了一个简单的登录表单，包含用户名和密码输入框以及一个提交按钮。
   • 使用了 v-model 指令将输入框的值绑定到 Vue 组件的状态中。
   • 提交表单时触发 handleLogin 方法。

2. 脚本部分 (<script>):

   • 使用 Vue 3 的组合式 API (setup 函数) 来管理组件状态和逻辑。
   • 定义了 username 和 password 两个响应式变量来存储用户输入。
   • 定义了 error 变量用于显示登录错误信息。
   • 使用 useRouter 钩子获取路由实例，以便在登录成功后跳转到其他页面。
   • handleLogin 方法中实现了简单的登录逻辑，如果用户名和密码匹配，则跳转到 /dashboard 页面；否则显示错误信息。

3. 样式部分 (<style scoped>):

   • 添加了一些基本的样式来美化登录表单，使其看起来更友好。