当前位置：首页 > VUE

vue实现登录注册

2026-03-10 02:48:41VUE

vue实现登录注册

Vue 实现登录和注册功能

技术栈建议

Vue 3（Composition API）
Vue Router（路由跳转）
Axios（HTTP请求）
Pinia/Vuex（状态管理，可选）

项目结构示例

src/  
├── views/  
│   ├── Login.vue    # 登录页面  
│   └── Register.vue # 注册页面  
├── router/  
│   └── index.js     # 路由配置  
├── stores/          # 状态管理（Pinia示例）  
│   └── auth.js  
└── api/  
    └── auth.js      # 接口封装

核心代码实现

路由配置

// 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;

登录页面（Login.vue）

<template>  
  <form @submit.prevent="handleLogin">  
    <input v-model="email" type="email" placeholder="邮箱" required />  
    <input v-model="password" type="password" placeholder="密码" required />  
    <button type="submit">登录</button>  
  </form>  
</template>  

<script setup>  
import { ref } from 'vue';  
import { useRouter } from 'vue-router';  
import { login } from '@/api/auth';  

const email = ref('');  
const password = ref('');  
const router = useRouter();  

const handleLogin = async () => {  
  try {  
    const response = await login({  
      email: email.value,  
      password: password.value  
    });  
    localStorage.setItem('token', response.data.token);  
    router.push('/dashboard'); // 跳转到主页  
  } catch (error) {  
    alert('登录失败: ' + error.message);  
  }  
};  
</script>

注册页面（Register.vue）

<template>  
  <form @submit.prevent="handleRegister">  
    <input v-model="name" type="text" placeholder="用户名" required />  
    <input v-model="email" type="email" placeholder="邮箱" required />  
    <input v-model="password" type="password" placeholder="密码" required />  
    <button type="submit">注册</button>  
  </form>  
</template>  

<script setup>  
import { ref } from 'vue';  
import { useRouter } from 'vue-router';  
import { register } from '@/api/auth';  

const name = ref('');  
const email = ref('');  
const password = ref('');  
const router = useRouter();  

const handleRegister = async () => {  
  try {  
    await register({  
      name: name.value,  
      email: email.value,  
      password: password.value  
    });  
    router.push('/login'); // 注册成功后跳转登录页  
  } catch (error) {  
    alert('注册失败: ' + error.message);  
  }  
};  
</script>

API封装（auth.js）

// api/auth.js  
import axios from 'axios';  

const API_URL = 'http://your-api-domain.com/auth';  

export const login = (credentials) => {  
  return axios.post(`${API_URL}/login`, credentials);  
};  

export const register = (userData) => {  
  return axios.post(`${API_URL}/register`, userData);  
};