vue2.x+element-ui 用户注册、登录界面

最新推荐文章于 2024-07-30 17:41:26 发布

你有遗憾吗

最新推荐文章于 2024-07-30 17:41:26 发布

阅读量2.3k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_61845534/article/details/120442175

版权

本文介绍了使用Vue2.x和Element-UI构建用户注册及登录界面的方法，包括登录页面布局、路由守卫设置，以及通过注册直接登录的实现思路。

摘要由CSDN通过智能技术生成

一、目标介绍
实现注册用户账号
完成登录后跳转主页面

二、登录、注册、路由守卫
2.1 login登录页面布局

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" &