当前位置：首页 > VUE

vue实现界面登录注册

2026-01-22 06:28:26VUE

Vue 实现登录注册界面

使用 Vue 实现登录注册界面需要结合 Vue 的核心功能（如数据绑定、组件化）以及路由管理。以下是具体实现方法：

项目初始化与依赖安装 通过 Vue CLI 创建项目并安装必要依赖（如 vue-router 和 axios）：

vue create auth-demo
cd auth-demo
npm install vue-router axios

路由配置 在 src/router/index.js 中配置登录和注册页面的路由：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

登录组件实现 创建 src/views/Login.vue，包含表单数据绑定和提交逻辑：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: { email: '', password: '' }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('Login failed')
      }
    }
  }
}
</script>

注册组件实现 创建 src/views/Register.vue，结构与登录类似但包含更多字段：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.name" type="text" placeholder="Name">
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Register</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: { name: '', email: '', password: '' }
    }
  },
  methods: {
    async handleRegister() {
      try {
        await axios.post('/api/register', this.form)
        this.$router.push('/login')
      } catch (error) {
        alert('Registration failed')
      }
    }
  }
}
</script>

样式优化 添加基础样式增强用户体验：

form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
}

表单验证 使用 Vuelidate 或自定义验证逻辑：

import { required, email, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      email: { required, email },
      password: { required, minLength: minLength(6) }
    }
  }
}

状态管理 对于复杂应用可引入 Vuex 管理用户状态：

// store/modules/auth.js
export default {
  state: { user: null, token: null },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const res = await axios.post('/api/login', credentials)
      commit('SET_USER', res.data.user)
    }
  }
}

安全注意事项