[新しいルーター] ページのコンポーネントは、ページ全体を手動で更新した後にのみ読み込まれます。

Question

新しいルートを追加し、新しいルートに遷移するアニメーションを追加しました。

ボタンがクリックされたときに新しいルート (/first) をプッシュする次のコードを追加しました。 リーリー

問題は、ボタンをクリックして「onClickTransition」メソッドを呼び出すと、ルーターは正常にプッシュされているように見えますが、ページが空であることです。このコンポーネントは、Ctrl R を押してページを手動で更新した場合にのみレンダリングされます。

問題の原因はアニメーションの挿入にあると考えられますが、ページを手動で更新すると、アニメーションは正常に動作します。それで何が問題なのか分かりません。よろしくお願いいたします。

これは app.vue のコードの残りの部分です:

リーリー

index.js のコード部分:

リーリー

「onClickTransition」メソッドは、メイン ルート「MainPage.vue」のサブコンポーネントである「PreStartPage.vue」コンポーネントから取得されます。

"PreStartPage.vue" で "次へ" ボタンをクリックすると、this.$emit."MainPage.vue" を使用して "MainPage.vue" にイベントが送信され、イベントという名前のメソッドを使用してイベントが受信されます。 「onClickNext1」は、別の this.$emit を通じて「App.vue」にシグナルを送信します。これは、App.vue に表示される「@clickedNext1」のソースです。

「PreStartPage.vue」のコードは次のとおりです:

リーリー

これは「MainPage.vue」のコードです:

ああああ

Answer 1

コードを次のように変更してみてください:

リーリー

$route.fullPath に設定された「key」属性により、ルートが変更されるたびに変換が正しく行われることが保証されます。

＃＃＃＃＃＃編集＃＃＃＃＃＃

この問題を解決するには、「:enter-active-class」属性と「:leave-active-class」属性を遷移コンポーネントに追加します。これにより、遷移中に要素に適用するクラスを指定できるようになります。トランジション。 App.vue コンポーネントでは、次のように変換コンポーネントを更新できます。

リーリー

これにより、遷移中に正しいクラスが要素に適用され、アニメーションが開始される前にコンポーネントが完全にレンダリングされることが保証されます。

詳細については、公式 Wiki を参照してください:

https://vuejs.org/guide/built-ins/transition.html#css-based-transitions