vueルートの切り替えはフェードアウトの簡単な実現です。

ルートジャンプのフェードアウト
開発にはハイエンド、大気、高級というニーズがあります。だからフロントエンドとして、あなたのプログラムをよりクールにする責任があります。ページ切り替え時にアニメーション効果を加えて、プログラムの動作効果を向上させます。
ルートを遷移アニメーションにするには、「router-view」タグの外部に「transion」タグを追加する必要があります。ラベルにはname属性が必要です。

<transition name="fade" mode="in-out">
 <router-view ></router-view>
</transition>

css遷移クラス名：
コンポーネントの移行過程では、4つのCSSクラス名が切り替えられます。この4つのクラス名は、transionのname属性に関連しています。例えば、name="fade"は、次の4つのCSSクラス名があります。
fade-enter:遷移の開始状態に入り、要素が挿入された時に有効になります。1フレームだけ適用したらすぐに削除します。
fade-enter-active:遷移の終了状態に入り、要素が挿入されると効果的になり、遷移過程が完了したら除去されます。
fade-leave:遷移の開始状態から離れ、要素が削除されるとトリガされ、1フレームだけ適用したらすぐに削除されます。
fade-leave-active:遷移の終了状態を離れ、要素が削除された時に有効になり、移行完了後に削除されます。
遷移のスタイル:

.fade-enter {
 opacity:0;
}
.fade-leave{
 opacity:1;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 opacity:0;
 transition:opacity .5s;
}

移行モードmode:
n-out：新しい元素は先に遷移に入り、完成したら現在の元素の遷移が離れます。
out-in：現在の要素は先に遷移し、完成後に新しい元素の遷移が入る。
以上のこのvueルートの切り替えは淡々とした簡単な実現です。つまり、小編纂は皆さんに全部の内容を共有しています。参考にしてもらいたいです。皆さんもよろしくお願いします。