javascript - Vue Router の使用時に Pusher および Vue.js コンポーネントがチャネルを離れない

Question

Laravel Echo で Pusher を使用して、アプリケーションの特定の領域のプレゼンス チャネルを作成しています。すべてのフロントエンド ルーティングは、Vue Router を使用して行われます。

ルートを切り替えると、Vue ルーターはルート設定に基づいて特定のコンポーネントをロードします。これはうまく機能しますが、Pusher はこれらのチャネルからユーザーを自動的に切断しません。これは、ページ全体の更新を実行した場合にのみ発生しますが、これは私が望んでいるものではありません。

私のコンポーネントでは、次のように、Pusher チャネルに参加するための js コードが insidemountedにあります。

    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 Router ルーティングを使用してチャネルからユーザーを切断するにはどうすればよいですか?

ありがとうございました。