当前位置：首页 > VUE

vue实现登陆

2026-03-28 20:43:55VUE

Vue 登录功能实现

环境准备
确保已安装 Vue CLI 或通过 CDN 引入 Vue，项目需包含 Vue Router（用于页面跳转）和 Axios（用于 HTTP 请求）。

基础结构
创建登录组件 Login.vue，包含表单元素：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="username" placeholder="用户名" type="text" required />
      <input v-model="password" placeholder="密码" type="password" required />
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

数据绑定与逻辑
在 <script> 中定义响应式数据和提交方法：

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard'); // 跳转到主页
      } catch (error) {
        this.errorMessage = '登录失败，请检查凭证';
      }
    }
  }
}
</script>

路由配置
在 router/index.js 中设置登录路由和路由守卫：

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
];

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

样式优化
添加基础样式提升用户体验：

<style scoped>
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}
input, button {
  padding: 8px;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
}
</style>

关键点说明

vue实现登陆