###こまっていること
vue, vue-routerを使ったSPAを開発しています。
routeの変更をwatchして、リンク先によってトランジションを切り分けています。
スマホ向けに開発しているので、戻るイベント(画面端からスワイプ)が発生した際は、邪魔なのでトランジションを発生させたくありません。
戻るイベントをキャッチして、トランジションを発生させない方法をご教授いただけないでしょうか。
###やってみたこと
popstateイベント時にtransitionNameを変更すればいいと思っていたのですが、
- watch: {'$route': ... }
- beforeLeave
- beforeEnter
- popstateイベント
- afterLeave
- afterEnter
の順に発生するので、そのタイミングではトランジションを止めることができませんでした。
他にもページ遷移ごとに、ハッシュ値をhistorystockとして観測してみたりしたのですが、
ブラウザバックと普通にリンククリックによる違いを判別できず実現しませんでした。
考えすぎて頭がぱんぱんなのでよろしくお願い居たいします。
###該当のソースコード
html
1<transition :name="transitionName"> 2 <router-view/> 3</transition>
js
1 watch: { 2 '$route' (to, from) { 3 const toTab = to.matched[0].meta.tabNum; 4 const fromTab = from.matched[0].meta.tabNum; 5 this.transitionName = fromTab < toTab ? 'go-right-tab' : 'go-left-tab'; 6 } 7 } 8
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/16 05:17 編集
2017/12/16 06:43
2017/12/16 07:16 編集