84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
次の App.vue ファイルがあります:
および次のルーター ファイル:
$router.push("/dashboard"); または router-link(to ="/dashboard" active-class="active") を使用するかどうかに関係なく、アプリを実行してリンクをクリックしたとき 。他の多くの質問やチュートリアルを確認しましたが、残念ながらまだ機能しません。変換が行われない理由は何か考えられますか?
router-link(to ="/dashboard" active-class="active") を使用するかどうかに関係なく、アプリを実行してリンクをクリックしたとき
###変化:### リーリー ###に### リーリー
変換ではビューへの変更は検出されないため、変更できるものを提供する必要があります。 また、
は CSS の実際のアニメーションである必要があることに注意してください。たとえば、次のようになります。 リーリー
コードには変更できるものがいくつかあります。
まず第一に、RouterView は グローバル登録 であるため、インポートを宣言する必要はありません。 vue-router がプロジェクトにインストールされている限り、RouterView または router-view をテンプレート上で直接安全に使用できます。
RouterView
vue-router
router-view
2 番目に、name プロパティを静的プロパティに変更する必要があります。 :name="fade" と記述することは、変数 fade の値を name に渡すことを意味します。コードに基づくと、fade は変数ではなく文字列であると思われます。つまり、プロップを name="fade" に変更する必要があります。 静的および動的プロパティの詳細についてはこちらをご覧ください。 p>
name
:name="fade"
fade
name="fade"
最後に、トランジションには CSS を使用する必要があります。 名前付き変換を宣言しているため、次の CSS を追加する必要があります:
CSS での fade の使用に注意してください。これは、name 属性で指定される値であり、次の場合を意味します:
その後、CSS には .slide-in-enter-active、.slide-in-enter-leave などが含まれるはずです。
.slide-in-enter-active
.slide-in-enter-leave
###変化:### リーリー ###に### リーリー
変換ではビューへの変更は検出されないため、変更できるものを提供する必要があります。 また、
fadeは CSS の実際のアニメーションである必要があることに注意してください。たとえば、次のようになります。 リーリー
コードには変更できるものがいくつかあります。
まず第一に、
RouterView
は グローバル登録 であるため、インポートを宣言する必要はありません。vue-router
がプロジェクトにインストールされている限り、RouterView
またはrouter-view
をテンプレート上で直接安全に使用できます。2 番目に、
name
プロパティを静的プロパティに変更する必要があります。:name="fade"
と記述することは、変数fade
の値をname
に渡すことを意味します。コードに基づくと、fade
は変数ではなく文字列であると思われます。つまり、プロップをname="fade"
に変更する必要があります。 静的および動的プロパティの詳細についてはこちらをご覧ください。 p>最後に、トランジションには CSS を使用する必要があります。 名前付き変換を宣言しているため、次の CSS を追加する必要があります:
リーリーCSS での
リーリーfade
の使用に注意してください。これは、name
属性で指定される値であり、次の場合を意味します:その後、CSS には
.slide-in-enter-active
、.slide-in-enter-leave
などが含まれるはずです。