vue-routerを使ったトランジションを、戻るボタンを押したときは無効にしたい

Question

###こまっていること
vue, vue-routerを使ったSPAを開発しています。
routeの変更をwatchして、リンク先によってトランジションを切り分けています。
スマホ向けに開発しているので、戻るイベント（画面端からスワイプ）が発生した際は、邪魔なのでトランジションを発生させたくありません。
戻るイベントをキャッチして、トランジションを発生させない方法をご教授いただけないでしょうか。

###やってみたこと
popstateイベント時にtransitionNameを変更すればいいと思っていたのですが、

• watch: {'$route': ... }
• beforeLeave
• beforeEnter
• popstateイベント
• afterLeave
• afterEnter

の順に発生するので、そのタイミングではトランジションを止めることができませんでした。
他にもページ遷移ごとに、ハッシュ値をhistorystockとして観測してみたりしたのですが、
ブラウザバックと普通にリンククリックによる違いを判別できず実現しませんでした。
考えすぎて頭がぱんぱんなのでよろしくお願い居たいします。

###該当のソースコード

<transition :name="transitionName">
    <router-view/>
</transition>

  watch: {
    '$route' (to, from) {
      const toTab = to.matched[0].meta.tabNum;
      const fromTab = from.matched[0].meta.tabNum;
      this.transitionName = fromTab < toTab ? 'go-right-tab' : 'go-left-tab';
    }
  }

Answer 1

popstateイベント時にtransitionNameを変更すればいいと思っていたのですが、(中略)そのタイミングではトランジションを止めることができませんでした。

試してみましたがトランジションは止まりました。

DEMO(codesandbox)

transitionNameをbeforeEachにてforwardに戻し、popStateイベントにてbackにしています。

Note: この例ではrouterに対してbeforeEachメソッドで登録したコールバックでtransitionNameをリセットしていますが、コールバックを解除する方法が(たぶん)ないので、消えたり現れたりするコンポーネントではしないほうがいいです。

追記

上記の方法ではうまくいかないようなので別の方法をとりました。
上記のdemoをアップデートしました(forkすべきでしたがうっかり上書きしました)。

vue-routerも内部でpopstateイベントリスナーを使っていて、イベント発生時には通常通りnavigation guardを実行したあとページ遷移しているようです。

demoではrouterがpopstateイベントリスナーを登録する前に自分のリスナー(Aとする)を登録しています(router/index.jsにて)。
これにより、ブラウザの戻るボタンを押したとき、Aはrouterが何らかの処理をする前に実行されます。

App.vueにおいて、dataのbackはデフォルトでfalseですが、Aでbackをtrueにします。

beforeEachはその後実行されるので、ブラウザバックなのかどうかはbackがtrueかfalseかで判断できますので、transitionNameをそれに合わせてセットします。そしてbackをfalseに戻します。

Comments

[teng]

ご回答ありがとうございます。
codesandbox上では止まっていますが、ブラウザ上で確認するとトランジションが発生してしまいます。（ https://3y4ypo80x6.codesandbox.io/ ）。
sandboxの疑似ブラウザ上ではイベントの発生順序が違うようです。
beforeイベントの前にpopstateが呼ばれてるのですが、通常のブラウザでこれを再現する方法が思いつきません...

[karamarimo]

少し強引な方法ですが別の方法を追記しました。

[teng]

ご提示いただいた方法で、想定の挙動を得ることができました。
ご丁寧かつ迅速なご回答、ありがとうございます。

routerがリスナーを登録する前に自分のイベントを登録するのは思いつきませんでした。
イベントの登録順を考えることや、ソースコードの中身を覗いてみることが大切だと勉強になりました。

teratailを初めて使いましたが、本当に助かりました。
ありがとうございます！！！