vue中组件销毁的问题

Question

我正在构建一个实时 Web 应用程序，该应用程序实现了一个实时多用户测验，多个用户可以在选择特定角色后参与其中。我在前端使用 Vue.js，在各个参与者之间使用 pusher.js 进行实时交互。

vue.js 项目由 3 个组件组成：一个用于选择角色，一个用于测验，一个用于测验结果。当特定条件被触发时（例如当问题结束时，用户被重定向到结果部分），单个用户从一个组件切换到另一个组件

我使用推送事件来通知某些情况。例如，当用户关闭运行应用程序实例的浏览器窗口时，会通知其他参与者。此控件基于用户离开推送者在线通道时触发的“推送者：成员删除”事件。我在每个组件中都设置了这个控件，因为我使用 vue-router 将通道引用传递给组件。

我的问题是，当应用程序传递到测验组件（使用“$router.push()”函数）时，第一个组件（用户在其中选择角色的 Home 组件）似乎没有被破坏。 因此，当用户在应用程序正在运行时关闭浏览器窗口（并导致放弃推送通道）在测验组件上触发的事件似乎由第一个组件（应销毁的 Home 组件）管理。

事实上，如果我在 Home 组件中的 vue "destroyed()" 函数中的 "pusher: member_removed" 事件中解绑通道，当用户在路由位于 quiz 组件上时离开应用程序时，该事件是' 不是由测验组件中的“channel.bind”管理的，其他用户不会收到通知。

这是频道的定义（room包含部分用户播放的房间id）

  this.channel = ChannelDetails.subscribeToPusher(this.room)

这是与 member_removed 事件的绑定，它导致横幅在其他参与者屏幕中的可视化（绑定在所有三个组件中）。

this.channel.bind('pusher:member_removed', () => {
          this.players -= 1

           $("#myModalDanger").modal({
              show: true
           });
         })

我该如何解决这种情况？

我试图解除通道与 Home 组件的 vue destroyed() 函数中的所有事件的绑定，认为这种绑定不允许组件破坏，但就像我之前所说的，使用这个解决方案我可以' t 向测验组件中的其他参与者通知单个用户的频道放弃。

Answer 1

为了在用户关闭选项卡时运行代码，您需要将侦听器附加到 beforeUnload 事件。 AFAIK，组件的 destroyed 方法仅在 Vue 实例销毁组件时调用。