1.vue-routerとは何ですか
- vue-router は、vue.js によって提供される公式のルーティング ソリューションです。vue プロジェクトと組み合わせてのみ使用でき、SPA プロジェクト内のコンポーネントの切り替えを簡単に管理できます。
2.vue-routerのバージョン
- Vue-router には現在 3.x と 4.x のバージョンがあります。その中で:
⚫ vue-router 3.x は vue2 と組み合わせてのみ使用できます
⚫ vue-router 4.x は vue3 と組み合わせてのみ使用できます - vue-router 3.xの公式ドキュメントのアドレス
- vue-router 4.xの公式ドキュメントのアドレス
3. vue-router 4.x の基本的な使用手順
① プロジェクトに vue-router をインストールします。
② ルーティング コンポーネントを定義します
。 ③ ルーティング リンクとプレースホルダーを宣言します
。 ④ ルーティング モジュールを作成します
。 ⑤ ルーティング モジュールをインポートしてマウントします。
3.1 プロジェクトに vue-router をインストールする
- vue3 プロジェクトでは、vue-router 4.x のみをインストールして使用できます。インストールするコマンドは次のとおりです。
3.2 ルーティングコンポーネントの定義
- プロジェクトに 3 つのコンポーネント MyHome.vue、MyMovie.vue、MyAbout.vue を定義します。将来的には、vue-router を使用してそれらの表示と切り替えを制御する予定です。
3.3 ルーティング リンクとプレースホルダーの宣言
- ラベルを使用してルート リンクを宣言したり、ラベルを使用してルート プレースホルダーを宣言したりできます。サンプルコードは次のとおりです。
3.4 ルーティングモジュールの作成
- プロジェクトに router.js ルーティング モジュールを作成し、次の 4 つの手順に従ってルーティング インスタンス オブジェクトを作成して取得します。
① 必要に応じて vue-router から 2 つのメソッドをインポートします。
② ルーティング制御を使用する必要があるコンポーネントをインポートします
。 ③ ルーティング インスタンス オブジェクトを作成します。
④ルーティングインスタンスオブジェクトを外部に共有する
⑤ルーティングモジュールをmain.jsにインポートしてマウントする
3.4.1 vue-router からオンデマンドで 2 つのメソッドをインポートする
3.4.2 ルーティング制御を使用する必要があるコンポーネントのインポート
3.4.3 ルーティングインスタンスオブジェクトの作成
3.4.4 外部共有ルーティング インスタンス オブジェクト
3.4.5 main.js にルーティング モジュールをインポートしてマウントする
