Vue局部注册组件实现组件化登录注册

痛定思痛。 2024-04-06 15:28 121阅读 0赞

#### Vue局部注册组件实现组件化登录注册 ####

*  一、效果
 *  二、代码
 *   *  1、index.js
     *  2、App.vue
     *  3、首页
     *  4、登录（注册同理）

## 一、效果 ##

注意我这里使用了element组件![在这里插入图片描述][2fb8a943d51e4077a39f54ee6834d773.png]

![在这里插入图片描述][f36bf51a765241e8a580c36eaa19b953.png]

## 二、代码 ##

### 1、index.js ###

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import HomePage from '../views/homePage'
    import Library from '../views/library'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        
        path: '/library',
        component: Library
      },
      {
        
        path: '/homePage',
        component: HomePage,
      },
    
    
    const router = new VueRouter({
        
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

### 2、App.vue ###

### 3、首页 ###

通过 components节点，为当前的组件注册私有子组件

import Login from "../homePage/login/index.vue";
    import Register from "../homePage/register/index.vue";

<template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户登录" name="first">
          <my-login />
        </el-tab-pane>
        <el-tab-pane label="用户注册" name="second">
          <my-register />
        </el-tab-pane>
      </el-tabs>
    </template>
    <script>
    import Login from "../homePage/login/index.vue";
    import Register from "../homePage/register/index.vue";
    export default {
          
      components: {
          
        "my-login": Login,
        "my-register": Register,
      },
      data() {
          
        return {
          
          activeName: "second",
        };
      },
      methods: {
          
        handleClick(tab, event) {
          
          console.log(tab, event);
        },
      },
    };
    </script>

### 4、登录（注册同理） ###

<template>
      <div class="login">
        <div class="userName">
          <el-input
            type="text"
            placeholder="请输入用户名"
            v-model="FORM_DATA.userName"
          />
        </div>
        <div class="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="FORM_DATA.password"
          />
        </div>
        <div class="loginButton">
          
          <el-button type="primary" :plain="true" @click="login">登录</el-button>
        </div>
      </div>
    </template>
    
    <script>
    import request from "@/axios/baseURL";
    import router from "@/router";
    
    // 接口数据初始化
    const FORM_DATA = {
          
      userName: "",
      password: "",
    };
    export default {
          
      data() {
          
        return {
          
          FORM_DATA,
        };
      },
      created() {
          
        console.log("登录界面");
      },
      methods: {
          
        login() {
          
          request.post("/systemUser/login", this.FORM_DATA).then((res) => {
          
            var code = res.data.code;
            var message = res.data.message;
            this.$message(message);
            if (code == 0) {
          
              router.push("/library");
            }
            console.log(res);
          });
        },
      },
    };
    </script>
    
    <style>
    </style>

*  奋斗不止，成功必将属于你。
 *  拥抱每一个挑战，成就更好的自己。
 *  勇攀高峰，不畏坎坷，终将登顶。
 *  塑造自己的梦想，脚踏实地向前迈进。
 *  勇往直前，坚定前行，未来可期待。

[2fb8a943d51e4077a39f54ee6834d773.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e62ba8056a8e418ba72f6e2d590c6f16.png
[f36bf51a765241e8a580c36eaa19b953.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/24bccb0adedf4aec869cb4403ecb838f.png