Help us understand the problem. What is going on with this article?

Nuxt.jsのbeforeDestroyed()でイベントリスナーを削除できなかった時の対処法。

発端

偉い人「このページは横画面でしか表示したくない」
蝦「はい」

環境

OS: windows10 64bit
node.js v10.16.3
Nuxt.js v2.10.2

イベントリスナーを追加

蝦「画面の向きが変わるたびにVueファイル内のdata()の値を変えてやればおk」
とりあえずMDNのサンプルをそのままつかう。
Window: orientationchange イベント - Web API | MDN

ebi.js
<script>
//中略
beforeMount() {
    console.log("beforeMount");
    window.addEventListener("orientationchange", this.checkRotate, false);
  }

</script>

しかし

イベントリスナーが消えない。

「後はbeforeDestroy()でイベントリスナーを削除するように書けばおk」

kani.js
<script>
//中略
  beforeDestroy() {
    console.log("beforeDestroy");
    window.removeEventListener("orientationchange", this.checkRotate, false);
  },

</script>

消えない。
コメント 2020-01-23 145126.png
追加はされるが削除はされないので、該当ページに遷移するたびにイベントリスナーが増える。やばい

原因: beforeDestroy()もDestroy()も実行されてない

プリントデバッグしてみると、ページ離脱時にbeforeDestroy()もDestroy()も実行されてない。
再起動してもキャッシュを消しても実行されないという不思議。

解決策: ナビゲーションガードを使う。

どうにもならなくなったらbeforeRouteLeave(to, from, next)で削除すればおk。
ナビゲーションガード | Vue Router
Vue-Routerのナビゲーションガードを使ってみる - Qiita

uni.js
<script>
//中略
 beforeRouteLeave(to, from, next) {
    if (to.name) {
      next();
      window.removeEventListener("orientationchange", this.checkRotate, false);
      return;
    }
    return;
  },

</script>

消えました。
コメント 2020-01-23 151735.png

別のプロジェクトでは再現しなかったので、多分もう使うことはほぼないだろうけど備忘録代わりに書いておく。
原因がわかる人がいたらだれか教えてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした