前言
实战已经开始了！在前面几篇文章中，我们把首页、登录页都已经完成开发了，并且对登录页做了校验，只有点击登录并且校验成功才会进入首页。本篇文章相对于上一章节会比较简单，只是对注册页面布局开发，顺便完善一下整个注册登录的路由串联。
注册页面布局
🔆 注册页面和登录页面类似，都是表单提交页面，所以下面也只是直接贴代码，有兴趣的同学可以自行DIY注册页。
稿图
组件DOM
👉 在views目录下新建一个register文件夹，并创建Register.vue文件
<template> <div class="wrapper"> <img class="wrapper__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/236a3cf5-e6e7-4f37-916f-72e1465ac359.png"/> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入手机号" /> </div> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入密码" type="password" /> </div> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="确认密码" type="password" /> </div> <div class="wrapper__register-button">注册</div> <div class="wrapper__register-link">已有账号去登陆</div> </div> </template> 复制代码
组件样式
👉 样式中同样引入了公共的Scss文件
<style lang="scss" scoped> @import '../../style/viriables.scss'; .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto .4rem auto; width: .66rem; height: .66rem; } &__input { height: .48rem; margin: 0 .4rem .16rem .4rem; padding: 0 .16rem; background: #F9F9F9; border: 1px solid rgba(0,0,0,0.10); border-radius: 6px; border-radius: 6px; &__content { line-height: .48rem; border: none; outline: none; width: 100%; background: none; font-size: .16rem; color: $content-notice-font-color; &::placeholder { color: $content-notice-font-color; } } } &__register-button { margin: .32rem .4rem .16rem .4rem; line-height: .48rem; background: #0091FF; box-shadow: 0 .04rem .08rem 0 rgba(0,145,255,0.32); border-radius: .04rem; border-radius: .04rem; color: #fff; font-size: .16rem; text-align: center; } &__register-link { text-align: center; font-size: .14rem; color: $content-notice-font-color; } } </style> 复制代码
路由配置
👆 在路由配置js文件中引入Register组件
import Register from '../views/register/Register' 复制代码
✌️ 在路由配置中添加Register组件跳转
const routes = [ { path: '/register', name: 'Register', component: Register } ] 复制代码
👌 浏览器地址栏中访问register路由
🔆 注册页面已经可以显示出来了，但是根据逻辑应该是从登录页跳转到注册页，这时候应该是登录状态校验失败的时候，也就是上一章节中配置的isLogin = false才会显示。
路由串联
根据上一章节中登录页的路由串联首页的配置方法，在注册页也是适用的。
局部路由守卫beforeEnter
- 在注册组件的路由配置中添加beforeEnter钩子函数，并从localStorage中解构出isLogin，然后根据isLogin的值去判断是否需要回到首页或者继续执行。
{ path: '/register', name: 'Register', component: Register, beforeEnter (to, from, next) { const { isLogin } = localStorage isLogin ? next({ name: 'Home' }) : next() } } 复制代码
⭕️ 局部路由守卫配置完成之后，修改地址栏就无法在跳转到登录页或者注册页了（前提是isLogin = true）
登录注册串联
- 登录跳转 👉 在登录页中给立即注册按钮绑定一个点击事件
<div class="wrapper__login-link" @click="handleRegisterClick">立即注册</div> 复制代码
👉 在setup函数中添加绑定的点击事件，同样是使用router.push跳转
setup () { const router = useRouter() const handleLogin = () => { localStorage.isLogin = true router.push({ name: 'Home' }) } const handleRegisterClick = () => { router.push({ name: 'Register' }) } return { handleLogin, handleRegisterClick } } 复制代码
👉 beforeEach函数中同样需要判断当前路由是否为Register，否则会一直保持在登录页
router.beforeEach((to, from, next) => { const { isLogin } = localStorage if (isLogin || to.name === 'Login' || to.name === 'Register') { next() } else { next({ name: 'Login' }) } }) 复制代码
😲 测试跳转之前，需要将localStorage中的isLogin设为false或者直接删除。(建议直接删除，有些localStorage中的isLogin设为false之后，可能会认为是字符串类型的)
- 注册跳转 👉 在注册页中给去登录按钮绑定一个点击事件
<div class="wrapper__register-link" @click="handleLoginClick">已有账号去登陆</div> 复制代码
👉 在setup函数中添加绑定的点击事件，同样是使用router.push跳转
<script> import { useRouter } from 'vue-router' export default { name: 'Register', setup () { const router = useRouter() const handleLoginClick = () => { router.push({ name: 'Login' }) } return { handleLoginClick } } } </script> 复制代码
总结
本篇文章主要是简单的注册页面布局和登录页的路由串联起来，但是也顺便巩固了登录页中使用到的路由钩子函数，由于钩子函数也是固定写法，是需要单独去记住的，所以需要多练习才行。
