vue实现简单登录
使用 Vue 实现简单登录功能
创建 Vue 项目
确保已安装 Vue CLI，通过以下命令创建新项目：
vue create vue-login-demo选择默认配置或手动配置（如 Babel、Router 等）。
设计登录页面
在 src/components 下创建 Login.vue 文件，包含表单和基础样式：
<template>
<div class="login-container">
<h3>用户登录</h3>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label>用户名</label>
<input v-model="username" type="text" required />
</div>
<div class="form-group">
<label>密码</label>
<input v-model="password" type="password" required />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleSubmit() {
console.log('登录信息:', this.username, this.password)
// 后续添加验证逻辑
}
}
}
</script>
<style scoped>
.login-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
</style>添加路由配置
修改 src/router/index.js，将登录页面设置为路由：
import Login from '../components/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]实现登录逻辑
在 handleSubmit 方法中模拟登录验证：
methods: {
handleSubmit() {
if (this.username === 'admin' && this.password === '123456') {
alert('登录成功')
this.$router.push('/') // 跳转到首页
} else {
alert('用户名或密码错误')
}
}
}状态管理（可选）
如需全局管理登录状态，可使用 Vuex：
// src/store/index.js
export default new Vuex.Store({
state: {
isLoggedIn: false,
user: null
},
mutations: {
loginSuccess(state, user) {
state.isLoggedIn = true
state.user = user
}
}
})在登录成功后调用：
this.$store.commit('loginSuccess', { username: this.username })表单验证增强
添加基础表单验证规则：
data() {
return {
username: '',
password: '',
errors: {}
}
},
methods: {
validateForm() {
this.errors = {}
if (!this.username) this.errors.username = '请输入用户名'
if (!this.password) this.errors.password = '请输入密码'
return Object.keys(this.errors).length === 0
},
handleSubmit() {
if (!this.validateForm()) return
// 剩余登录逻辑...
}
}完整示例结构
vue-login-demo/
├── src/
│ ├── components/
│ │ └── Login.vue
│ ├── router/
│ │ └── index.js
│ └── store/
│ └── index.js (可选)通过以上步骤可实现包含路由跳转、表单验证和状态管理的登录功能。实际项目中需替换模拟数据为真实 API 调用，并考虑添加 Token 存储等安全措施。
