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

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

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

一、效果

注意我这里使用了element组件在这里插入图片描述

在这里插入图片描述

二、代码

1、index.js

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

2、App.vue

<template><div id="app"><router-view /></div>
</template>

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-inputtype="text"placeholder="请输入用户名"v-model="FORM_DATA.userName"/></div><div class="password"><el-inputtype="password"placeholder="请输入密码"v-model="FORM_DATA.password"/></div><div class="loginButton"><!-- type="primary"设置按钮背景颜色为绿色 :plain="true"窗体主体部分背景颜色透明--><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>
  • 奋斗不止,成功必将属于你。
  • 拥抱每一个挑战,成就更好的自己。
  • 勇攀高峰,不畏坎坷,终将登顶。
  • 塑造自己的梦想,脚踏实地向前迈进。
  • 勇往直前,坚定前行,未来可期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/699925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SVM的功率分类,基于支持向量机SVM的功率分类识别,Libsvm工具箱详解

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接:基于SVM的功率分类,基于支持向量机SVM的功率分类识别资源-CSDN文库 https://download.csdn.net/download/abc991835105/88862836 SVM应用实例, 基于…

虚拟机的四种网络模式对比

nat网络地址转换 nat网络 桥接 内网模式 仅主机

【Java】java异常处理机制(实验五)

目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 1、理解java的异常处理机制 2、掌握try catch结构和thow和thows关键字的用法 二、实验内容 1、编写一个程序&#xff0c;输入某个班某门课程成绩&#xff0c;统计及格人数、不及格人数及课程平均分。设计一个异…

通天星CMSV6 车载视频监控平台信息泄露漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

【Python-语法】

Python-语法 ■ Python基础■ 数据类型■ 注释 单行注释&#xff0c;多行注释■ 编码方式 ■■■■■ ■ Python基础 ■ 数据类型 ■ 注释 单行注释&#xff0c;多行注释 ■ 编码方式 ■ ■ ■ ■ ■

【深度学习】微调通义千问模型:LoRA 方法,微调Qwen1.8B教程,实践

官网资料: https://github.com/QwenLM/Qwen/blob/main/README_CN.md 文章目录 准备数据运行微调设置网络代理启动容器执行 LoRA 微调修改 finetune/finetune_lora_single_gpu.sh运行微调 执行推理 在本篇博客中&#xff0c;我们将介绍如何使用 LoRA 方法微调通义千问模型&#…

Unity 2021.3发布WebGL设置以及nginx的配置

使用unity2021.3发布webgl 使用Unity制作好项目之后建议进行代码清理&#xff0c;这样会即将不用的命名空间去除&#xff0c;不然一会在发布的时候有些命名空间webgl会报错。 平台转换 将平台设置为webgl 设置色彩空间压缩方式 Compression Format 设置为DisabledDecompre…

Sora:开启视频生成新时代的强大人工智能模型

目录 一、Sora模型的诞生与意义 二、Sora模型的技术特点与创新 三、Sora模型的应用前景与影响 四、面临的挑战与未来发展 1、技术挑战 2、道德和伦理问题 3、计算资源需求 4、未来发展方向 随着信息技术的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已成为…

vue3中使用vuedraggable实现拖拽el-tree数据进分组

看效果&#xff1a; 可以实现单个拖拽、双击添加、按住ctrl键实现多个添加&#xff0c;或者按住shift键实现范围添加&#xff0c;添加到框中的数据&#xff0c;还能拖拽排序 先安装 vuedraggable 这是他的官网 vue.draggable中文文档 - itxst.com npm i vuedraggable -S 直接…

拓扑空间简介

目录 介绍集合论与映射映射相关定义映射&#xff08;map&#xff09;映射的一种分类&#xff1a;一一的和到上的 拓扑空间背景介绍开子集开子集的选择 拓扑拓扑空间常见拓扑拓扑子空间同胚其他重要定义 开覆盖紧致性有限开覆盖紧致性 R R R的紧致性 习题 介绍 这是对梁灿彬的《…

【软件架构】01-架构的概述

1、定义 软件架构就是软件的顶层结构 RUP&#xff08;统一过程开发&#xff09;4 1 视图 1&#xff09;逻辑视图&#xff1a; 描述系统的功能、组件和它们之间的关系。它主要关注系统的静态结构&#xff0c;包括类、接口、包、模块等&#xff0c;并用于表示系统的组织结构…

C++入门学习(三十六)函数的声明

程序是自上而下运行的&#xff0c;比如我下面的代码&#xff1a; #include <iostream> #include<string> using namespace std;int main() { int a1; int b2;int sumaddNumbers(a,b); cout<<sum;return 0; }int addNumbers(int a, int b) { int sum …

MFC 配置Halcon

1.新建一个MFC 工程&#xff0c;Halcon 为64位&#xff0c;所以先将工程改为x64 > VC 目录设置包含目录和库目录 包含目录 库目录 c/c ->常规 链接器 ->常规 > 链接器输入 在窗口中添加头文件 #include "HalconCpp.h" #include "Halcon.h"…

简单讲解并梳理微信小程序默认几个文件和文件夹结构及其作用

那么 我们来说一下 小程序整个项目结构 它各个文件 和 整体结构 这是我们新创建的一个小程序项目 我们从上到下 分别来看一下 这些文件和目录结构的作用 首先是 pages 它的作用在于存储整个项目所有的 page页面文件 我们小程序官方 是推荐我们将所有page 界面都放在pages目录…

稀疏计算、彩票假说、MoE、SparseGPT

稀疏计算可能是未来10年内最有潜力的深度学习方向之一&#xff0c;稀疏计算模拟了对人脑的观察&#xff0c;人脑在处理信息的时候只有少数神经元在活动&#xff0c;多数神经元是不工作的。而稀疏计算的基本思想是&#xff1a;在计算过程中&#xff0c;将一些不重要的参数设置为…

一招解决 vue数据格式校验时候 async-validator: [‘XXXX is not a number‘]

在vue中 amt数字需要进行纯数字校验&#xff1a; 格式都没问题&#xff0c;但是输入纯数字也会报错&#xff0c;报错如下&#xff1a; async-validator:[‘amt is not a number’] 网上找了一些&#xff0c;但是均为能奏效&#xff0c;尝试如下&#xff1a; 尝试1&#x…

基于Python网络爬虫的IT招聘就业岗位可视化分析推荐系统

文章目录 基于Python网络爬虫的IT招聘就业岗位可视化分析推荐系统项目概述招聘岗位数据爬虫分析系统展示用户注册登录系统首页IT招聘数据开发岗-javaIT招聘数据开发岗-PythonIT招聘数据开发岗-Android算法方面运维方面测试方面招聘岗位薪资多维度精准预测招聘岗位分析推荐 结语…

FlinkCDC详解

1、FlinkCDC是什么 1.1 CDC是什么 CDC是Chanage Data Capture&#xff08;数据变更捕获&#xff09;的简称。其核心原理就是监测并捕获数据库的变动&#xff08;例如增删改&#xff09;&#xff0c;将这些变更按照发生顺序捕获&#xff0c;将捕获到的数据&#xff0c;写入数据…

Jenkins中Publish Over SSH插件使用(1)

SSH插件 前言Publish Over SSH插件是jenkins里面必不可少的插件之一&#xff0c;主要的功能有两个把jenkins服务器上的文件&#xff0c;传输到远程nginx&#xff0c; 远程执行shell命令和脚本。 1. SSH插件下载与配置 1.1 下载Publish over SSH插件 系统管理—》管理插件 …

Python Web开发记录 Day1:HTML

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、HTML1、前端引入和HTML标签①前端引入②浏览…