vue2登录

以下是使用 Vue 2 实现登录的基本步骤：

1. 创建一个登录页面组件，包含用户名和密码输入框和登录按钮。
2. 在组件中创建一个 data 对象，用于存储用户名和密码。
3. 给登录按钮绑定一个点击事件，事件处理函数中向后端发送登录请求，将用户名和密码作为请求参数。
4. 接收后端返回的登录状态，判断是否登录成功。
5. 如果登录成功，将用户信息保存到 Vuex 中或者浏览器的 localStorage 中，并且跳转到主页面。
6. 如果登录失败，弹出错误提示。

下面是一个简单的示例代码：

<template>
  <div>
    <h1>登录</h1>
    <form>
      <label>用户名：</label>
      <input type="text" v-model="username"><br>
      <label>密码：</label>
      <input type="password" v-model="password"><br>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      // 发送登录请求
      axios.post('/api/login', {
        username: this.username,
        password: this.password,
      }).then(response => {
        const data = response.data
        if (data.success) {
          // 登录成功，保存用户信息
          localStorage.setItem('user', JSON.stringify(data.user))
          // 跳转到主页面
          this.$router.push('/')
        } else {
          // 登录失败，弹出错误提示
          alert(data.message)
        }
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

在上面的示例中，我们使用了 axios 库来发送 HTTP 请求。在实际项目中，你可以根据自己的需求选择其他 HTTP 请求库，比如 fetch 或者 jQuery 的 ajax。同时，我们还使用了 Vue Router 来进行页面跳转，这需要在路由配置中进行相应的设置。