【Vue3从零开始-实战】S7：注册页面布局开发及路由串联

2022-09-27 268

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-实战】S7：注册页面布局开发及路由串联

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！在前面几篇文章中，我们把首页、登录页都已经完成开发了，并且对登录页做了校验，只有点击登录并且校验成功才会进入首页。本篇文章相对于上一章节会比较简单，只是对注册页面布局开发，顺便完善一下整个注册登录的路由串联。

注册页面布局

🔆 注册页面和登录页面类似，都是表单提交页面，所以下面也只是直接贴代码，有兴趣的同学可以自行DIY注册页。

稿图

2UYG4ZLYFD8NXTJC`)P@DV6.png

组件DOM

👉 在views目录下新建一个register文件夹，并创建Register.vue文件

VU})L@{{K9%)4@(VB(LNF{O.png

<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路由

2~M{P[GY)0YS9P9DN${X6FY.png

🔆 注册页面已经可以显示出来了，但是根据逻辑应该是从登录页跳转到注册页，这时候应该是登录状态校验失败的时候，也就是上一章节中配置的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>
复制代码