vue 项目 利用bus实现登录注册页面之间的切换

最新推荐文章于 2023-11-27 21:07:40 发布
最新推荐文章于 2023-11-27 21:07:40 发布
阅读量726 收藏 3
点赞数
文章标签： vue bus 页面切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42043970/article/details/103251583
版权

一、目标

  • 写一个登录的主页面。
  • 主页面内放入一个登录页和一个注册页。
  • 进入后默认为登录，点击注册按钮后换为注册页。
  • 注册完成后换回登录页。

二、前期准备

文件位置关系：
文件位置
主页面结构：通过v-show来控制显示的是登录还是注册。
主页面结构
登录和注册页面结构：
登录界面
注册页面
界面效果：
在这里插入图片描述
点击注册按钮：
在这里插入图片描述
点击确认注册又切换回登录界面。

</

最低0.47元/天 解锁文章
yyysx
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+element+Css（Less）实现登录注册页面滑动切换效果
Me_Rui的博客
11-28 2758
使用vue+element-ui+css动画实现登录注册页面的滑动切换效果。
Vue如何实现不同登录方式的切换（账号密码登录、邮箱验证登录等）
热门推荐
Wzmlzrr的博客
03-26 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、使用vue开发框架的时候，无论是vue2或是vue3，都会运用到element ui组件库或是element-plus ui组件库，所以我们要解决的问题首先从这些组件库里来找寻答案二、项目里按需引入或者全局导入element ui组件库或是element-plus ui组件库1.省略常规操作，直接在页面中引入Tabs（标签页）组件2.运行后的效果三、再说一下Tabs（标签页）的属性（根据项目的实际需求添加） 前言 通常情.
vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持）
最新发布
朝阳39的博客
11-27 339
效果预览 技术要点——自适配全屏背景 https://blog.csdn.net/weixin_41192489/article/details/119992992 技术要点——密码输入框 自定义图标切换显示隐藏 https://blog.csdn.net/weixin_41192489/article/details/133940676 技术要点——记住账号（支持多账号） 核心需求和逻辑 勾选“记住账号”，一旦登录成功过，下次登录能在账号输入框的输入推荐建议列表中，选择该账号 未
vue 实现用户登录方式的切换功能
10-15
主要介绍了vue 实现用户登录方式的切换功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3+TS，登陆页码账号与二维码的一个切换
m0_62330492的博客
11-25 728
我们的标题时不会变的，我们时点击右边的小图片进行地下的样式的一个切换。本文章使用v-else 和v-if 实现该功能。给一个变量，并且给变量赋值，赋一个初始值。一个初学者，还请多多指教。
vue实现企业微信扫码登录后台管理系统
DLGDark的博客
12-09 4018
vue实现企业微信扫码登录后台管理系统。 1. 在登录页面构建内嵌式登录二维码（这种方式好处：无需跳转到企业微信域下登录后再返回，提升企业微信登录的流畅性与成功率） 2. 扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面(这里指的是是登录页面) 3. 在本页面获取url后面拼接的code，用code去请求后台接口 4. 后台接口服务那边用access_token和code去获取用户的企业微信号 5. 通过企业微信号查找数据库
vue bus全局事件中心简单Demo详解
11-30
这时，我们可以利用Vue Bus（也称为自定义事件总线）来实现全局事件的发布与订阅，从而在不依赖于组件树的情况下传递数据。 Vue Bus 是一种轻量级的解决方案，它创建了一个单一实例的Vue对象，用于作为全局事件的...
解决vue bus.$emit触发第一次$on监听不到问题
11-20
在Vue.js应用中，事件总线（Event Bus）是一种常见的组件间通信方式，它通过创建一个新的Vue实例来充当事件中心，允许组件之间发送和接收自定义事件。在标题提到的问题中，开发者遇到了`bus.$emit`触发的事件在`bus....
vue案例练习
08-10
- **事件总线**（Event Bus）：在组件间通信时，非父子关系的组件可以利用Event Bus实现通信。 - **自定义事件**：组件可以通过`$emit`触发自定义事件，配合监听器`v-on`进行通信。 - **插槽（Slot）**：用于组件...
Vue常见面试真题汇总
10-25
12. Vue Router是官方的路由库，它与Vue.js紧密结合，实现SPA（单页应用）的导航和页面切换，支持动态路由、命名视图、路由懒加载等功能。 13. Vuex是一个状态管理库，遵循 Flux 架构，提供了store、actions、...
banner_vue.zip
05-29
在本项目中，"banner_vue.zip" 包含了一个使用纯 Vue.js 实现的自动轮播 Banner 图片广告的小模块。Vue.js 是一个轻量级的前端JavaScript框架，以其组件化、易上手和高性能的特点受到开发者们的广泛喜爱。在这个模块...
详解Vue PC端如何实现扫码登录功能
忧郁的蛋的专栏
01-26 4932
本篇文章给大家带来了关于Vue的相关知识，其中主要介绍了在PC端实现扫码的原理是什么？怎么生成二维码图片？怎么用Vue实现前端扫码登录？感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。
[记录]vue3实现PC项目微信扫码进行账号注册/登录(内嵌二维码)
Helen_T的博客
06-20 5949
在网站顶部导航栏的登录入口中实现微信扫码注册/登录功能
Vue实现登录界面切换
m0_46769524的博客
02-05 1404
<template> <div> <div id = "app"> <h1 class="login_title">用户登录</h1> <div class = "login_header_title"> <a class = "title1" href="javascript:;" rel = "external nofollow" @click = "loginW
Vue实现用户登录切换的小案例
weixin_42146583的博客
07-04 2631
Vue实现用户登录切换的小案例 需求：用户进行登录时，可以选择邮箱登录和账号登录，点击按钮即可进行切换。 代码如下所示。主要思想为：为button添加一个监听事件，当用户点击按钮时，更改isUser的值。 而isUser通过v-if指令来控制显示的是用户账号还是用户密码。 <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type
vue3、vue2 实现网站微信扫码登录
无
02-22 1986
vue2,vue3 实现网站微信扫码登录
Vue 编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果
qq_47119426的博客
11-06 4249
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用Tab栏编写一个登录页面</title> </head> <script src="./JS/vue.js"></script> <!-- 引入animate.css --> <link rel="stylesheet" hr
基于vue实现简单登录方式的切换
NXBBC的博客
03-01 1876
实用性高，可根据代码模板进行其他效果的实现
vue3实现登录注册切换tab
09-06
Vue 3实现登录注册切换tab可以使用Vue Router和Vue的数据绑定机制来实现。 首先，需要安装和配置Vue Router。在项目中安装Vue Router，并在main.js文件中导入和使用Vue Router。 ``` // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 接下来，需要创建登录和注册组件。可以分别创建Login.vue和Register.vue组件。 ``` // Login.vue <template> <div> <h2>登录</h2> <!-- 登录表单 --> </div> </template> <script> export default { name: 'Login', } </script> ``` ``` // Register.vue <template> <div> <h2>注册</h2> <!-- 注册表单 --> </div> </template> <script> export default { name: 'Register', } </script> ``` 然后，在App.vue组件中创建导航菜单和切换tab的功能。使用Vue的数据绑定机制来切换tab。 ``` // App.vue <template> <div> <nav> <ul> <li @click="activeTab = 'login'" :class="{ active: activeTab === 'login' }">登录</li> <li @click="activeTab = 'register'" :class="{ active: activeTab === 'register' }">注册</li> </ul> </nav> <router-view :tab="activeTab" /> </div> </template> <script> export default { name: 'App', data() { return { activeTab: 'login', } }, } </script> ``` 最后，在router.js文件中配置路由。 ``` // router.js import { createRouter, createWebHistory } from 'vue-router' import Login from './Login.vue' import Register from './Register.vue' const routes = [ { path: '/login', component: Login, }, { path: '/register', component: Register, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 完成以上步骤后，就可以根据点击导航菜单来切换登录和注册页面的tab了。点击导航菜单时，会触发activeTab的值改变，从而切换显示的组件。同时，Vue Router会根据路由的配置来加载相应的组件，实现路由切换的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值