二、登录、注册、路由守卫
2.1 登录页面布局
<template>
<div class="login-section">
<!-- :rules="rules" -->
<el-form
label-position="top"
label-width="100px" class="demo-ruleForm"
:rules="rules"
:model="rulesForm"
status-icon
ref="ruleForm"
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="rulesForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
2.2 实现登录
<script>
import {login} from '@/service/api';
export default {
data() {
return {
//存储数据的对象
rulesForm:{
name:'',
password:''
},
rules:{
//自定义校检规则
name:[
{required:true,message:'名字',trigger:'blur'},
{min:1,max:5,message:'长度在3到5',trigger:'blur'}
],
password:[
{required:true,message:'密码',trigger:'blur'},
{min:3,max:5,message:'长度在3到5',trigger:&#