Laravel回波存在通道与vue路由器不兼容

该应用程序是一个聊天应用程序，使用laravel和Vue，一旦用户登录，他会看到所有在线用户的列表，我在主页的挂载组件中调用Echo包装器来显示所有在线用户，它可以工作并显示他们，现在的问题是如果我转到另一个页面（通过Vue路由器）然后返回主页，它不会显示在线用户列表。。。除了手动，我会再次刷新页面。 下面是我的代码片段：

mounted () {
// alert('Shoud work')
// console.log(Echo)
Echo.join('online')
.here((users) => {
  alert(JSON.stringify(users))
    this.users = users
})
.joining((user) => {
    this.users.push(user)
})
 .leaving((user) => {
    this.users = this.users.filter(u => (u.id !== user.id));
    })
  }
}

---

尝试使用component

Distromed

方法离开频道。由于您从未离开过频道，一旦您回来，问题可能是

Echo.join

不会再次加载，因为用户已经在频道上，因此不会触发

。此处

负责加载组件

users

属性和聊天用户数组

mounted () {
    Echo.join('online')
    .here(users => {
        this.users = users
    })
    .joining(user => {
        this.users.push(user)
    })
    .leaving(user => {
        this.users = this.users.filter(u => (u.id !== user.id));
    })
},
destroyed() {
    Echo.leave(user => {
        this.users = this.users.filter(u => (u.id !== user.id));
    });
}

或

更新：

如果您想让用户在整个应用程序中“登录”，一种方法是创建一个“会话”组件。此组件可以有模板，也不能有模板，但是，它需要在每个页面上保持加载状态。要访问此会话组件外部的用户列表，您可以将用户数据存储到浏览器的本地存储中，使用全局变量（例如window.session.users），或者使用Vuex（如果可用）。无论哪种方式，只要用户数组可供其他组件使用，会话组件将在用户离开或加入应用程序（或聊天…或您在其中实现的任何加入/离开规则）时保持该信息的最新状态

---

例如，假设您创建了一个名为

session

的组件。您可以使用

轻松地将其放置在顶部导航组件模板中。由于会话组件自己的模板为空，因此不会影响顶部导航。但是，它将被呈现，允许您管理用户的联机状态。

但是如果用户离开，则在应用程序的其他部分将看不到他的预见，我可以使用vuex保存所有联机用户的列表吗？我现在做的和你建议的答案类似，我使用Echo离开频道。离开（“在线”）你能分享你用来让状态频道工作的配置吗？Laravel echo不会触发。here（）函数

mounted () {
    Echo.join('online')
    .here(users => {
        this.users = users
    })
    .joining(user => {
        this.users.push(user)
    })
    .leaving(user => {
        this.removeUser()
    })
},
destroyed() {
    Echo.leave(user => {
        this.removeUser()
    });
},
methods: {
    removeUser(user) {
        this.users = this.users.filter(u => (u.id !== user.id))
        // Any other reusable code...
    }
}