Vue系列第四篇：Vue2 + Element开发登录页面

**Vue系列第四篇：Vue2 + Element开发登录页面**

在前三篇文章中，我们已经学习了如何使用Vue.js进行基本的页面开发，包括组件化、路由管理等。现在，我们将进入更复杂的主题——开发一个完整的登录页面。

在这个例子中，我们将使用Element UI来构建登录页面的UI组件，并且我们会使用Vue Router来实现页面之间的跳转。

### 登录页面的需求我们的登录页面需要具备以下功能：

* 用户可以输入用户名和密码* 用户可以点击登录按钮进行登录* 如果用户输入的用户名或密码错误，会显示一个错误提示* 如果用户登录成功，会跳转到首页### 登录页面的实现####1. 创建登录组件首先，我们需要创建一个登录组件。我们将其命名为 `Login.vue`。

html<template>
 <div class="login-container">
 <el-form ref="form" :model="form" label-width="0px">
 <el-form-item prop="username">
 <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
 </el-form-item>
 <el-form-item prop="password">
 <el-input type="password"
 v-model="form.password"
 placeholder="请输入密码"
 ></el-input>
 </el-form-item>
 <el-button type="primary" @click="handleLogin">登录</el-button>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 username: '',
 password: ''
 }
 };
 },
 methods: {
 handleLogin() {
 // TODO: Implement login logic here console.log('Login button clicked!');
 }
 }
};
</script>

<style scoped>
.login-container {
 width:300px;
 margin:100px auto;
}
</style>

javascriptimport axios from 'axios';

export default {
 // ...
 methods: {
 async handleLogin() {
 const { username, password } = this.form;
 try {
 const response = await axios.post('/api/login', {
 username,
 password });
 console.log(response.data);
 // 如果登录成功，跳转到首页 this.$router.push({ name: 'Home' });
 } catch (error) {
 console.error(error.response.data);
 // 如果登录失败，显示错误提示 this.$message.error('用户名或密码错误！');
 }
 }
 }
};

javascriptimport Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
 routes: [
 {
 path: '/',
 name: 'Home',
 component: () => import('@/views/Home.vue')
 },
 {
 path: '/login',
 name: 'Login',
 component: () => import('@/views/Login.vue')
 }
 ]
});