1. ルーティングとは
- ルーティング（英語: router ）とは対応関係である。ルーティングは 2 つのカテゴリに分類されます。
① バックエンド ルーティング
② フロントエンド ルーティング
2. バックエンドルーティング
- バックエンドルーティングとは、リクエストメソッド、リクエストアドレス、および関数処理関数間の対応関係を指します。Node.js コースでは、エクスプレス ルーティングの基本的な使用方法は次のとおりです。
3. SPA とフロントエンド ルーティング
- SPA とは、Web サイトに HTML ページが 1 つだけあり、すべてのコンポーネントの表示と切り替えがこの唯一のページで完了することを意味します。この時点で、異なるコンポーネント間の切り替えは、フロントエンド ルーティングを通じて実装する必要があります。
- 結論: SPA プロジェクトでは、異なる機能間の切り替えは、完了するフロントエンド ルーティングに依存します。
4. フロントエンドルーティングとは何ですか
- わかりやすい概念：ハッシュアドレスとコンポーネントの対応。
5. フロントエンドルーティングの仕組み
① ユーザーがページ上のルーティング リンクをクリックする
② URL アドレス バーのハッシュ値が変化する
③ フロントエンド ルーティングがハッシュ アドレスの変化を監視する
④ フロントエンド ルーティングが現在のハッシュ アドレスに対応するコンポーネントをレンダリングするブラウザで。
- 結論: フロントエンドルーティングとは、ハッシュアドレスとコンポーネント間の対応関係を指します。
6. シンプルなフロントエンドルーティングを実装する
- ステップ 1: MyHome、MyMovie、MyAbout の 3 つのコンポーネントをインポートして登録します。サンプルコードは次のとおりです。
- ステップ 2: ラベルの is 属性を通じて、表示するコンポーネントを動的に切り替えます。サンプルコードは次のとおりです。
- ステップ 3: コンポーネント構造で次の 3 つのリンクを宣言し、別のリンクをクリックしてブラウザのアドレス バーのハッシュ値を切り替えます。
- ステップ 4: 作成したライフサイクル関数で、ブラウザーのアドレス バーのハッシュ アドレスの変化を監視し、表示されるコンポーネントの名前を動的に切り替えます。
