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

一、目标

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

二、前期准备

文件位置关系：

主页面结构：通过v-show来控制显示的是登录还是注册。

登录和注册页面结构：


界面效果：

点击注册按钮：

点击确认注册又切换回登录界面。

三、进入正题

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

bus.js 文件的位置随意，只要在 import 的时候找到正确的路径就好。

bus.js 内容：

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

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

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

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