17-vue零基础到实战-注册和登录页面「渡一教育」( 二 )

接下来是注册组件
//register组件<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" auto-complete="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></template><script>export default { data() { var validatePass = (rule, value, callback) => { if (value =https://www.dangaocn.com/q/reed/== '') { 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 { activeName: 'second', ruleForm: { name: '', pass: '', checkPass: '', }, rules: { name: [ { required: true, message: '请输入您的名称', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' } ], pass: [ { required: true, validator: validatePass, trigger: 'blur' } ], checkPass: [ { required: true, validator: validatePass2, trigger: 'blur' } ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.$message({ type: 'success', message: '注册成功' }); // this.activeName: 'first', } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } }}vue-router
vue-router 是vue创建单页项目的核心，可以通过组合组件来组成应用程序，我们要做的是将组件(components)映射到路由(routes) ，然后告诉 vue-router 在哪里渲染它们。
上面的代码里已有涉及到一些路由切换，我们现在来完善路由：
安装
$ cnpm i vue-router
引入
import Router from 'vue-router'Vue.use(Router)在src文件夹下面新建 router（文件夹）/index.js
我们引入了三个组件：
HelloWorld 登录后的展示页
login 登录主界面
register 注册组件
路由守卫
利用 router.beforeEach 路由守卫设置需要先登录的页面。通过 requiresAuth 这个字段来判断该路由是否需要登录权限，需要权限的路由就拦截，然后再判断是否有token(下文会讲到token) ，有就直接登录，没有就跳到登录页面。
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import login from '@/components/login'import register from '@/components/register'Vue.use(Router)const router = new Router({ mode: 'history', routes: [{ path: '/', name: 'home', component: HelloWorld, meta: { requiresAuth: true } }, { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, }, { path: '/login', name: 'login', component: login, }, { path: '/register', name: 'register', component: register, }, ]});//注册全局钩子用来拦截导航router.beforeEach((to, from, next) => { //获取store里面的token let token = store.state.token; //判断要去的路由有没有requiresAuth if (to.meta.requiresAuth) { if (token) { next(); } else { next({ path: '/login', query: { redirect: to.fullPath } // 将刚刚要去的路由path作为参数，方便登录成功后直接跳转到该路由 }); } } else { next();}});export default router;