vue结合element ui处理登录事件

代码:

<template class="ii">
<div class="bb">
  <div >
    <div >
  <el-form ref="loginForm" :model="loginForm" class="logincontainer"  :rules="loginRules">
    <h3 class="logintitle">系统灯
    </h3>
    <el-form-item prop="username">
      <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="用户名"></el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input type="password"  auto-complete="false" v-model="loginForm.password" placeholder="密码"></el-input>
    </el-form-item>

    <el-form-item>
      <el-input type="text"  auto-complete="false" v-model="loginForm.code" placeholder="验证码"></el-input>
      <el-checkbox v-model="checked" class="loginrenmenber">记住我</el-checkbox>
      <el-button type="primary" style="width: 100%" class="btns" @click="submitlogin">登录</el-button>
    </el-form-item>

  </el-form>
</div>
</div>
</div>
</template>

<script>
export default {
     
     
name: "Login",
  data(){
     
     
  return {
     
     
    loginForm: {
     
     
      username: 'admin',
      password: '123',
      code: ""
    },
    checked: true,
    loginRules: {
     
     
      username: [{
     
     required: true, message: "请输入用户名", trigger: "blur"}],
        password:[{
     
     min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur"}]
    }
  }},
  methods:{
     
     
    submitlogin()
    {
     
     
      this.$refs.loginForm.validate((valid) => {
     
     
        if (valid) {
     
     
          alert('submit');

        } else {
     
     
          this.$message.error('错了');
          return false;
        }
      });
    }
  }

}

</script>

<style>
 .loginrenmenber{
     
     
   text-align: left;
   margin: 0px 0px 15px 0px;
 }

.logincontainer {
     
     
  background-color: #2b4b6b;
  background: aquamarine;
  margin:180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background-clip: padding-box;
  border: 1px solid #42b983;
  border-radius: 15px;
  box-shadow: #2b4b6b;
}
.ii{
     
     
  background: blueviolet;
}
.bb{
     
     
  background: aquamarine;
}

.login_box {
     
     
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;}



  .btns {
     
     
    display: flex;
    justify-content: flex-end;
  }


</style>

路由部分处理:

import Login from '../views/Login.vue'
const routes = [
  {
    
    
    path: '/',
    name: 'Login',
    component: Login
  }
]

效果:

点击登录后：