質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.98%

  • JavaScript

    13877questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    417questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 464

teng

score 77

こまっていること

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';
    }
  }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

DEMO(codesandbox)

transitionNamebeforeEachにて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において、databackはデフォルトでfalseですが、Aでbacktrueにします。

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/16 14:17 編集

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

    キャンセル

  • 2017/12/16 15:43

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

    キャンセル

  • 2017/12/16 16:16 編集

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13877questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Vue.js

    417questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。