あきぞらです。
Vueで開発をしていた時に、
クリックイベントなどのイベントリスナーがページ遷移をしても終了しないという事象がありました。
今回はその対処方法について紹介していきます。
イベントリスナーを実装したらbeforeDestoryも設定する
Vueファイルのスクリプトで、以下のように設定していました。
画面のサイズが変わったら、handleというメソッドを実行する処理です。
mounted () { window.addEventListener('resize', this.handle); }
しかしこのままでは、ページ遷移しても処理が画面上に残ったままになります。
これを解決するのが、クリア処理を入れる実装です。
addEventListenerでイベントリスナーを追加したら、
removeEventListenerでクリア処理を行います。
そのクリア処理を、beforeDestroy(インスタンスが破棄される直前に呼ばれる処理)に追加します。
mounted () { window.addEventListener('resize', this.handle); }, beforeDestroy: function () { window.removeEventListener('resize', this.handle); },
これを設置しておくことで、ページ遷移をする直前などでクリア処理を実行してくれます。