基于vue-注册登录页面

本文应用Vue3+Element-Plus+Ts构建登录注册页面

一、Vue-cli项目搭建

引用其他博主这里就不过多赘述，详情：Vue(二)：Vue3安装_zhouym_的博客-CSDN博客_安装vue3

二、在components下新建InputGroup.vue,LoginForm.vue,RegisterForm.vue。views同样新建404.vue，forgotPassword.vue，LoginRegister.vue。

 三、router里面的路由都是根据views下的vue文件来创建（本文都是一级路由）

路由守卫：router.beforEach(to,next,from)=>{},用于保护路由的跳转，比如得到后端的确认验证后即可跳转至对应跳转页面路由。反之，则固定在本设定路由之下。

import { createRouter, createWebHashHistory, RouteRecordRaw, } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/:catchAll(.*)',  //找到所有没有的路由 正则表达
    name: '/404',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( '../views/404.vue')
  },
  {
    path: '/loginregister',
    name: 'loginregister',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( '../views/LoginRegister.vue')
  },
  {
    path: '/forgotPassword',
    name: 'forgotPassword',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( '../views/forgotPassword.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
//路由守卫
// router.beforeEach((to,from,next)=>{
//   const isLogin=localStorage.ele_login?true:false;
//   if (to.path=='/login'){
//     next();
//   }else {
//     //是否在登陆状态下
//     isLogin?next(): next('/login')
//   }

// })

export default router

四、对组件下的页面进行设计

InputGroup.vue

<template>
    <div class="text_group">
        <!--组件结构-->

        <!--组件容器-->
        <div class="input_group" :class="{'is-invalid':error}">
            
            <!-- 输入框 -->
            <input :type="type" 
            :value="value" 
            :placeholder="placeholder" 
            :name="name" 
            @input="$emit('input',$event.target.value)">
        
        <!-- 输入框后面的按钮 -->
        <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">{
  {btnTitle}}</button>
        </div>
        <!-- 错误提醒 -->
            <div v-if="error" class="invalid-feedback">{
  {error}}</div>
        

    </div>
    
</template>

<script>
export default {
    name:"inputgroup",
    props:{  //属性，组件中自定义设置的组件
        type:{
            type:String,
            default:"text"
        },
        value:String,
        palceholder:String,
        name:String,
        btnTitle:String, //按钮里面的文字
        disabled:Boolean, //是否让当前按钮可用
        error:String
    }
}
</script>



<style  scoped> /* 限制scoped范围 */


.input_group{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.input_group input{
    height: 100%;
    width: 60%;
    outline: none;
}
.input_group button{
    border:none;
    outline:none;
    background: #fff;
}
.input_group button[disabled]{
    color:red;
}
.is-invalid{
    border:1px solid red;
}
.invalid-feedback{
    color: red;
    padding-top: 5px;
}
    
</style>

LoginForm.vue

<template>
     <el-form 
    ref="loginForm"
    :model="loginUser" 
    :rules="rules"
    label