1.SPA：単一ページアプリケーション、単一ページアプリケーション
SPAとは：アプリケーション全体には、1つの完全なHTMLページと、さまざまな「ページ」コンテンツを保持する複数のコンポーネントフラグメントがあります。
SPAアプリケーションは、アドレスバーの相対パスの変更を検出し、一致するコンポーネントフラグメントを選択して、一意のHTMLファイル内の対応する領域を置き換えます。
VSマルチページ
リクエスト数：シングルページアプリケーションは、初めて読み込まれるときに1回だけリクエストし、完全なHTMLページと複数のフラグメントをクライアントに取得して保存します。ジャンプするたびに、サーバーシングルにリクエストを送信する必要はありません。
マルチページアプリケーション。ページにジャンプするたびに、サーバーにリクエストを複数回再送信します
ページジャンプ：シングルページアプリケーション、DOMツリー全体を置き換える必要はなく、DOMツリーのローカルノードのみを置き換える必要がある-高効率
マルチページアプリケーション、ジャンプするたびに、DOMツリー全体を削除して再構築する必要がある
同じリソースリクエスト：ページが変更されていないため、単一ページアプリケーション。リソースを繰り返しリクエストする必要はありません。
マルチページアプリケーション。ページが読み込まれるたびに、すべてのリソースが再要求されます。
単一ページのアプリケーションは検索の最適化にあまり適しておらず、クローラーはそれらに到達できません。ほとんどのモバイルアプリは単一ページアプリを使用します。
2. Vueルーターコンポーネント：
何ですか：Vueで単一ページのアプリケーションを具体的に実装するコンポーネント
いつ：Vueフレームワークを使用して単一ページのアプリケーションを実装する場合
方法：
①vue-router.jsをダウンロードして導入する
②基本的なルートコンポーネントを定義する
<div id = "app">
</ div>
<スクリプト>
新しいビュー（{
el： "＃app"、
データ：{}
}）
③ルートコンポーネントの内容で、サブコンポーネントに置き換えられる可能性のある領域を確保する
<router-view />は、他のサブコンポーネントのルーティングスロットのフラグメントに対して実行されます
いつ：ページのフラグメント領域が変更される可能性がある限り、ルータービューを使用して場所を占有します
4.複数のサブコンポーネントを定義します。各コンポーネントは2つの部分に分けられます：<テンプレート>と<スクリプト>
ps：複数のページで繰り返し使用され、グローバルコンポーネントになり、単一のページで使用され、サブコンポーネントにされるコンポーネント。
5.ルーティングを定義する：3つのステップ
①ルーティングディクショナリを定義します。
ルーティングディクショナリ：相対パスとコンポーネント間の対応のコレクション
var routers = [
{パス： "/"、コンポーネント：インデックス}、//デフォルトのホームページ
{パス： "/ index"、コンポーネント：インデックス}、
{パス： "/ login"、コンポーネント：ログイン}、
{パス： "/ *"、コンポーネント：NotFound} // *は、上記以外のパスの残りを意味し、通常404に使用されます
]；
②ルーターオブジェクトを作成し、ルーティングディクショナリを読み込む
var router = new VueRouter（{ルート}）
③ルーターをルートコンポーネントの新しいVueにインストールします
新しいビュー（{
...、
ルーター
}）
複数のページが領域を共有している限り、親コンポーネントを定義し、それを親コンポーネントと子コンポーネントに分割できます。
いくつかのページにはいくつかのコンポーネントがあります。同じヘッダーとフッターがグローバルコンポーネントとして定義されています。グローバルコンポーネントはルートに表示されません。
親コンポーネントと同じパーツを含む場所を抽出し、<router-view>に配置します。
ページ内で使用する機能をサブコンポーネント化した場合。
6.ネストされたルーティング
内容：ルーティングディクショナリのルーティングオブジェクトにサブルーティングオブジェクトが含まれています
いつ：複数の「ページ」が同じ領域の一部を含むように形成されている場合。例：ヘッダー
方法：①同じ部品のコンポーネントをグローバルコンポーネントに抽出する
②追加の親コンポーネントが抽出されます。
<同じ部品のグローバルコンポーネント>
<ルータービュー>
③ルーティング辞書を設定する
{パス：/親パス、コンポーネント：親コンポーネント、子：[
{パス：「/親パス/子パス」、コンポーネント：子コンポーネント}
]}
ランタイム：アドレスバー：＃/親パス/子パス
/親パスまず、div＃appの<router-view>を親コンポーネントに置き換えます
/子パス次に、親コンポーネントの<router-view>を子コンポーネントに置き換えます
7.ルーティングジャンプ：2つのタイプ
①HTML：<router-link to = "/ relative path"> text </ router-link> //通常：<a href="#/relative path"> text </a>
読み込み時：<a href="/relative path"> text </ router-link> <router-link>はタグに変換されると、読み込み時に必要かどうかを自動的に判断します＃
②JS：this。$ Router .push（ "/ target address"）//ブラウザは新しいアドレスを開き、実際には新しいアドレスを履歴にプッシュします
// $ router router $ route address
8.ルーティングパラメータ：
①ルーティングディクショナリで、事前に構成します：{パス： "/詳細/：ふた "、...}
②ジャンプ時：/詳細/ 9
③組立方法のパラメータ値を受け入れるには：[この] $ルートを .Params。LID 長いアクセスパラメータを追加するために必要な詳細、または404などとして//を
場所検索
简化：{パス： "/ details /：lid "、...、小道具：true }
var component = {
...、
小道具：[" ふた "]
}
バインドするときは、lid変数を直接使用できます
