复制代码
1, src/views/Goods/index.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
//
}
</script>
<style>
</style>
2, src/views/Login/Login.vue
<template>
<div>
<div class="login-box">
<h3 class="title">登录界面</h3>
<el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="60px"
class="demo-ruleForm">
<el-form-item label="账号" prop="username" required>
<el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" required>
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
var validateUser = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'));
} else {
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
return {
loginForm: {
username: '',
password: ''
},
rules: {
username: [{
validator: validateUser,
trigger: 'blur'
}],
password: [{
validator: validatePass,
trigger: 'blur'
}]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('效验通过', this.loginForm);
// 请求登录接口-----
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="less" scoped>
.login-box {
width: 600px;
height: 300px;
// 上下为100px,左右自由,掉在当中
margin: 150px auto;
// 添加阴影 10 px
padding: 20px;
border-radius: 10px;
border: 1px solid #eee;
background: #fff;
}
.title {
margin-bottom: 40px;
text-align: center;
color: #666;
}
</style>
3, src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Login from '@/views/Login/Login.vue'
// 异步
const Goods = () => import('../views/Goods/Goods.vue')
const Params = () => import('../views/Params/Params.vue')
const Advert = () => import('../views/Advert/Advert.vue')
const My = () => import('../views/My/My.vue')
const Logistics = () => import('../views/Logistics/Logistics.vue')
const Order = () => import('../views/Order/index.vue')
const OrderList = () => import('../views/Order/OrderList/index.vue')
const OrderBack = () => import('../views/Order/OrderBack/index.vue')
// 子级路由
const AddGoods = () => import('../views/Goods/AddGoods.vue')
Vue.use(VueRouter)
const routes = [{
path: '',
component: Layout,
// 路由的元信息
meta: {
isLogin: true
},
children: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/goods',
name: 'Goods',
component: Goods
}, {
path: '/add-goods',
name: 'AddGoods',
component: AddGoods
}, {
path: '/params',
name: 'Params',
component: Params
}, {
path: '/advert',
name: 'Advert',
component: Advert
}, {
path: '/my',
name: 'My',
component: My
}, {
path: '/logistics',
name: 'Logistics',
component: Logistics
}, {
path: '/order',
name: 'Order',
component: Order,
redirect: '/order/order-list',
children: [{
path: 'order-list',
component: OrderList
}, {
path: 'order-back',
component: OrderBack
}]
}]
},
{
path: '/login',
name: 'Login',
component: Login,
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 路由拦截
router.beforeEach((to, from, next) => {
// console.log('---to---', to);
// 1, 判断是否需要登录
if (to.matched.some(ele => ele.meta.isLogin)) {
// 2, 判断当前的用户是否已经登录
let token = '';
if (token) {
// 判断已登录
next();
} else { // 判断未登录
// 跳转到登录页面
next('/login');
}
} else { // 不需要登录
next();
}
})
export default router
复制代码
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, 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>
