Vue RouterとTransitionで画面遷移の実装したときにハマった

はじめに Vue RouterとVueのビルトインコンポーネントであるTransitionで画面遷移時のアニメーションを適用することにした。 しかし、一部のコンポーネントの読み込みが以上に遅くなってしまったので、調査〜解決まで行ってみた。 TL;DR <Transition>は子要素として単一ノードでなければならない。 <component>を<div>で囲って一つの要素にする必要があった。 ただ、<Transition>のアニメーションを発火させるため、<div>にkey属性を追加する必要がある。 Transitions require single children nodes. Therefore you can wrap the <component> tag inside a <div>, however, a plain <div> inside a <transition>