在view文件夹下添加Login.vue
在router.js添加login路由
路由切换成功:
下面修改登录界面,到element网站复制一个form组件的代码,然后修改成登录的界面即可
<template>
<div class="page">
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model.number="ruleForm2.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
var checkUsername= (rule, value, callback) => {
if (!value) {
return callback(new Error('用户名不能为空'));
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
return {
ruleForm2: {
pass: '',
username: ''
},
rules2: {
pass: [
{validator: validatePass, trigger: 'blur'}
],
username: [
{validator: checkUsername, trigger: 'blur'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
这个界面还带有home和about的路由链接,删除,然后修改一下登录的界面样式。
删除这里的路由链接
修改样式
<template>
<div class="page">
<el-form :model="form" status-icon :rules="rules" ref="loginForm" label-width="100px"
class="login-box">
<h3 class="login-title">欢迎登陆</h3>
<el-form-item label="用户" prop="username">
<el-input placeholder="请输入用户名" v-model.number="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" placeholder="请输入密码" v-model="form.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
pass: '',
username: ''
},
rules: {
pass: [
{required: true, message: '密码不可为空', trigger: 'blur'}
],
username: [
{required: true, message: '用户名不可为空', trigger: 'blur'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="scss" scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 60px 15px 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 25px #909399;
-moz-box-shadow: 0 0 25px #909399;
box-shadow: 0 0 25px #909399;
}
.login-title{
text-algin:center;
margin: 0 auto 40px 60px;
color:#303133;
}
</style>
最终效果:
在element文档上找到布局的代码,创建Container.vue页面,目录代码布局如下:
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
路由修改如下: