Vue聊天室中WebSocket的封装实现不同页面接收相同消息后进行的不同操作

首先简单介绍下，在这个项目中拥有home和chat两个页面（chat是home的嵌套路由），home处理消息推送后更新房间信息和好友请求信息，chat处理消息推送后更新的是房间中的聊天信息

对npm库的封装：

原先做这个项目时，webSocket连接一直都是是在home页面连接一次，在chat页面连接一次，也就是说一个账号需要连接两个socket连接。一直觉得这种方法不够好，由于chat页面是home页面的子路由，之前想的办法一直是在父子路由之间传值，将stompClient由home路由传递给chat子路由，但一直没有找到方法。
后来发现其实把stompClient和webSocket的连接封装到js文件里面，然后在home和chat页面import这个封装好的js文件，就相当于使用一个全局变量stompClient就不需要再重新建立连接了,而这个封装的js文件会在第一次调用也就是home页面进行webSocket的连接。原本思考了非常久要怎么在嵌套路由之间传值，这就是思想进入了死胡同吗。。。
后来发现全局变量的stompClient在第二次调用时进行的subscribe监听似乎不能生效。。。这两个连接共用了一个stompClient变量也共用了一个subscribe监听方法。。。
看来只能由home页面监听，然后传递消息给子路由了？那就违背了我一开始的思想，一开始就是想的两个页面都要有一个stompClient呀。
后来又想到一个方法，前端使用同一个stompClient在home页面创建监听topic的函数，在chat页面创建监听topicChat的函数。后端接收到webSocket消息后分别向两个前端监听的接口进行返回（/topic和/topicChat分别代表），这样做的话前端就可以只建立一个webSocket连接后还能再两个页面接收相同消息了。
或许还有更好的方法，但我想不出来了。。。