teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2017/12/16 06:42

投稿

karamarimo
karamarimo

スコア2555

answer CHANGED
@@ -6,4 +6,18 @@
6
6
 
7
7
  `transitionName`を`beforeEach`にて`forward`に戻し、`popState`イベントにて`back`にしています。
8
8
 
9
- Note: この例では`router`に対して`beforeEach`メソッドで登録したコールバックで`transitionName`をリセットしていますが、コールバックを解除する方法が(たぶん)ないので、消えたり現れたりするコンポーネントではしないほうがいいです。
9
+ Note: この例では`router`に対して`beforeEach`メソッドで登録したコールバックで`transitionName`をリセットしていますが、コールバックを解除する方法が(たぶん)ないので、消えたり現れたりするコンポーネントではしないほうがいいです。
10
+
11
+ #### 追記
12
+
13
+ 上記の方法ではうまくいかないようなので別の方法をとりました。
14
+ 上記のdemoをアップデートしました(forkすべきでしたがうっかり上書きしました)。
15
+
16
+ vue-routerも内部で[popstateイベントリスナーを使って](https://github.com/vuejs/vue-router/blob/90cd2690d59c6bd56e5bc12b5b752166a1d35e98/src/history/html5.js#L21)いて、イベント発生時には通常通りnavigation guardを実行したあとページ遷移しているようです。
17
+
18
+ demoではrouterがpopstateイベントリスナーを登録する前に自分のリスナー(Aとする)を登録しています(router/index.jsにて)。
19
+ これにより、ブラウザの戻るボタンを押したとき、Aはrouterが何らかの処理をする前に実行されます。
20
+
21
+ App.vueにおいて、`data`の`back`はデフォルトで`false`ですが、Aで`back`を`true`にします。
22
+
23
+ beforeEachはその後実行されるので、ブラウザバックなのかどうかは`back`が`true`か`false`かで判断できますので、`transitionName`をそれに合わせてセットします。そして`back`を`false`に戻します。