用Event机制实现web登录后不刷新页面

web app在登录后不刷新页面，仅局部刷新，这样的做法似乎不是很主流。大概留意了一下几个大网站，大多数网站的做法：

登录后不全页面刷新（一下简称“不刷新”），似非主流做法。不过，若非要如此（比如登录前后页面变化不是很大，设计同学觉得硬生生刷新一次，用户体验不好），我们现在也尝试了一下，也是可行的。

“不刷新”，对于前端开发的要求自然比“刷新”要高一些，高在两点：

基于该机制，实现起来也就不是什么理论上的难题了：执行在“用户登录”这件事发生之后，给全局发一个Event，对此Event感兴趣的模块（即于身份相关）就可以在此时进行数据的重新获取、渲染等工作了。

另，鉴于用户身份数据这种全局可能都需要的，可在一个地方保存（而不是各个模块自己去取、存）。故，可在“用户登录”并且“获取用户数据”这两个动作都完成后，再通知全局。

“用户退出”，与登录是一样的原理。不过，因为im模块比较复杂，初始作者因忙于其他工作不能支援，清理工作要想做到比较彻底很得费一番周折。故，只实现了“登录不刷新”，而“退出”，就刷新吧，一切回到干净状态。算是偷懒了吧。

EventBus 又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

废话不多说，直接开始使用 EventBus

要用 EventBus ，首先要初始化一个 EventBus ，这里称它为全局事件总线。

发送事件的语法： this$EventBus$emit(发送的事件名,传递的参数)

已经创建好 EventBus 后我们就需要向它发送需要传递的事件，以便其他组件可以向 EventBus 获取

例子：有两个组件A和B需要通信，他们不是父子组件关系， B 事件需要获得 A 事件里的一组数据 data

接收事件的语法： this$EventBus$on(监听的事件名, 回调函数)

A 组件已经向全局事件总线 EventBus 发送了一个 aMsg 事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

B组件展示结果：

在上一个例子中，我们A组件向事件总线发送了一个事件 aMsg 并传递了参数 MsgA ，然后 B 组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开 B 组件，然后再次进入B组件时，又会触发一次对事件 aMsg 的监听，这时时间总线里就有两个监听了，如果反复进入 B 组件多次，那么就会对 aMsg 进行多次的监听。

1解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听

2语法： this$EventBus$off(要移除监听的事件名)

以上就是关于用Event机制实现web登录后不刷新页面全部的内容，包括:用Event机制实现web登录后不刷新页面、vue 事件总线EventBus的概念、使用以及注意点、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！