当前位置：首页 > VUE

vue登录页面实现

2026-03-29 16:59:15VUE

实现Vue登录页面的步骤

创建Vue项目 使用Vue CLI创建一个新项目，确保已安装Node.js和Vue CLI。运行以下命令初始化项目：

vue create vue-login-page

安装必要依赖 在项目目录中安装路由和状态管理库（如Vue Router和Vuex）：

npm install vue-router vuex

设计登录页面组件 在src/components目录下创建Login.vue文件，包含表单、输入框和提交按钮：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 处理登录逻辑
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
</style>

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

处理登录逻辑 在Login.vue的handleSubmit方法中添加登录验证和跳转逻辑：

methods: {
  handleSubmit() {
    if (this.username && this.password) {
      // 模拟API调用
      setTimeout(() => {
        localStorage.setItem('isAuthenticated', 'true')
        this.$router.push('/dashboard')
      }, 500)
    }
  }
}

添加状态管理 在src/store/index.js中创建Vuex store管理登录状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false
  },
  mutations: {
    setAuth(state, status) {
      state.isAuthenticated = status
    }
  },
  actions: {
    login({ commit }) {
      commit('setAuth', true)
    }
  }
})

保护路由 在路由配置中添加导航守卫，防止未认证用户访问受保护页面：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated')
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

添加表单验证 使用Vuelidate或其他验证库增强表单验证：

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交表单
      }
    }
  }
}

响应式设计 通过CSS媒体查询确保登录页面在不同设备上显示正常：

@media (max-width: 600px) {
  .login-container {
    padding: 10px;
    width: 90%;
  }
}

错误处理 添加错误提示逻辑，显示验证或API错误：

vue登录页面实现

data() {
  return {
    error: null
  }
},
methods: {
  async handleSubmit() {
    try {
      // API调用
    } catch (error) {
      this.error = '登录失败，请检查用户名和密码'
    }
  }
}