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

时间:2024-05-19 15:22:11

一、目标

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

二、前期准备

文件位置关系:
vue 项目 利用bus实现登录注册页面之间的切换
主页面结构:通过v-show来控制显示的是登录还是注册。
vue 项目 利用bus实现登录注册页面之间的切换
登录和注册页面结构:
vue 项目 利用bus实现登录注册页面之间的切换
vue 项目 利用bus实现登录注册页面之间的切换
界面效果:
vue 项目 利用bus实现登录注册页面之间的切换
点击注册按钮:
vue 项目 利用bus实现登录注册页面之间的切换
点击确认注册又切换回登录界面。

三、进入正题

1. 加入公共文件 bus.js。

bus.js 文件的位置随意,只要在 import 的时候找到正确的路径就好。
vue 项目 利用bus实现登录注册页面之间的切换
bus.js 内容:
vue 项目 利用bus实现登录注册页面之间的切换

2.在主页面、登录页面、注册页面均导入 bus.js 文件。

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

3. 在登录页面的注册方法内写入bus.$emit("")(""内文字自定)。

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

4. 注册页面的注册成功方法内同样写入 bus.$emit("")。

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

5. 回到主界面。在created()里用 bus.$on("") 监听事件变化并作出相应值的修改。

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