Javascript 使用Vue路由器时Pusher和Vue.js组件未离开通道

我正在使用Pusher和Laravel Echo为应用程序中的某些区域创建状态通道。 我所有的前端路由都是使用Vue路由器完成的

在路由之间切换时，Vue路由器将根据我的路由设置加载某些组件。它工作得很好，但是，Pusher不会自动断开用户与这些频道的连接。只有当我运行一个完整的页面刷新时才会发生，这不是我想要的

在我的组件中，用于加入推送器通道的js代码位于

挂载的内部，如下所示：

    data() {
        return {
            users: [],
        }
    },
    mounted() {
        Echo.join('transaction.' + this.tid)
            .here(users => {
                this.users = users;
                }
            })
            .joining(user => {
                this.users.push(user);
            })
            .leaving(user => {
                this.users.splice(this.users.indexOf(user), 1);
            });
    },
    methods: {
        // ...
    },

如何使用Vue路由器路由断开用户与频道的连接，而不刷新页面

谢谢。
我相信Vue路由器可能会因为性能原因而使组件实例保持活动状态。因此，即使在组件之间布线，websocket通道仍然可以连接

为防止此问题，您可以使用Vue的component
Distromed
方法手动离开通道

由于您使用的是Laravel的Echo，所以只需执行以下操作：
Echo.leave（'channel-name'）

Echo.leave（'transaction.'+this.tid）？我在这里遇到了与此问题相反的情况@crabbly一旦我通过vue路由器导航到另一条路线，然后返回我的主页，我希望它加载所有在线用户的列表，但echo不会启动，除非我进行一次整页刷新@dapo，我在那里发布了一个我认为可以解决此问题的答案。我希望有帮助。
...
methods: {
    // ...
},
destroyed() {
    Echo.leave('transaction.' + this.tid);
}