Vueで一つのURLで複数の画面遷移をする方法

Question

前提

Vue3で懸賞サイトのweb開発をしています。

実現したいこと

画面数は個人情報画面、確認画面、完了画面の3つです。
これらを一つのURLで管理したいと考えています。

構造は一つのviewに各画面のコンポーネントを配置を想定していますが、フォーム画面や確認画面で次の画面に遷移するボタンを押下した時に、コンポーネントの切り替え方法が現在不明瞭です。

具体的にどの様な方法をとるのでしょうか。
また、そもそもこの設計に問題があれば教えていただけると幸いです。

補足情報（FW/ツールのバージョンなど）

vue3,javascript

Answer 1

複数のコンポーネントを切り替えたいときは、 動的コンポーネント を使うと良いでしょう。以下に公式ドキュメントへのリンクを載せましたので、読んでみてください。「vue3 動的コンポーネント」等で調べれば、他のサイトも出てくると思います。

• コンポーネントの基本 動的なコンポーネント | Vue.js - https://v3.ja.vuejs.org/guide/component-basics.html#...

Comments

[masahase]

動的コンポーネントですね。ドキュメントの方読んでみようと思います。ありがとうございます。