vue前端登录页面

下面是一个简单的 Vue 前端登录页面示例，包括输入用户名和密码，点击登录按钮后，将用户名和密码发送到后端进行验证。

<template>
  <div>
    <form @submit.prevent="login">
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password">
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      // 发送用户名和密码到后端进行验证
      this.$http.post('/api/login', {
        username: this.username,
        password: this.password,
      }).then(response => {
        // 登录成功，跳转到首页
        this.$router.push('/home')
      }).catch(error => {
        // 登录失败，提示用户
        alert('登录失败，请重试！')
      })
    }
  }
}
</script>

需要注意的是，在实际开发中，需要根据具体的业务需求来进行登录验证和跳转逻辑的编写。此外，为了防止 CSRF 攻击，在发送登录请求时需要携带 CSRF Token。