Vueを学ぶ

第8章 ルーティング ルーティング

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

これまでの章では、Vueコンポーネントの基礎と、Vueコンポーネントを構成するためのさまざまなアプローチを学んできた。コンポジションAPIを使用して、再利用可能なコンポーネント・ロジックをスタンドアロンで作成した。また、レンダリングやカスタムプラグインの作成など、より高度な概念についても学んだ。

この章では、Vueアプリケーションの公式ルーティング管理ライブラリであるVue RouterとそのコアAPIを使ったルーティングシステムの概念を紹介することで、Vueアプリケーション構築の異なる側面であるルーティングについて探求する。そして、アプリケーションのルートを設定する方法、ルーターガードを使用してアプリケーションのパス間でデータを渡して処理する方法、アプリケーションの動的ルートとネストされたルートを構築する方法を学ぶ。

ルーティングとは何か？

ユーザがウェブをナビゲートするとき、ブラウザのアドレスバーにユニフォーム・リソース・ロケータ（URL）を入力する。URLはウェブ上のリソースのアドレスである。URLには多くの部分があり、以下の重要なセクションに分けることができる（図8-1） ：

所在地

プロトコル、アプリケーションのドメイン名（またはウェブサーバのIPアドレス）、リクエストされたリソースへのアクセスに使用されるポートが含まれる 。

パス

リクエストされたリソースへのパス。Web開発では、事前に定義されたパスパターン に基づいて、ブラウザ側でレンダリングするページコンポーネントを決定するために使用する。

クエリパラメータ

サーバに追加情報を渡すためのキーと値のペアのセットで、& の記号で区切られる。クエリパラメータは主にページ間のデータ受け渡しに使う 。

アンカー

# 。同じページの特定の要素にナビゲートするためにアンカーを使う。多くの場合、マッチしたidを持つマッチしたid 値や、メディア要素のタイムラプス 。

図8-1. URLの構造

ユーザからURLを受け取ると、ブラウザは受け取ったURLに基づいてサーバと通信し、要求されたリソースがあればそれを返す。リソースは、画像や動画などの静的ファイル、またはWebページやWebアプリケーションなどの動的ページである。

シングル・ページ・アプリケーション（SPA）では、代わりにブラウザ側でルーティング・メカニズムを実行することで、ブラウザをリフレッシュすることなくスムーズなページ・ナビゲーションを可能にしている。URLはページのアドレスであるため、ルーティングシステムを使用して、そのパスパターンを、アプリケーション でそれを表す特定のコンポーネントに接続する。

Vueのようなフロントエンド・フレームワークは、SPA用のコンポーネントを構築するためのレイアウトは提供するが、ルーティング・サービスは提供しない。完全なユーザ・ナビゲーション体験を実現するには、履歴保持やブックマークといったSPAの課題解決を含め、アプリケーションのルーティングを自分たちで設計・開発しなければならない。

あるいは、Vue Routerをルーティングの主要エンジンとして使うこともできる。 ...