[Vue2.0] —vue-router(26)

[Vue2.0] —vue-router(26)

ここに画像の説明を挿入

1.vue-routerの理解

これは、SPAアプリケーションを実装するために特別に使用されるvueのプラグインライブラリです。

第二に、SPAアプリケーションの理論

  1. シングルページWebアプリケーション(SPA)。
  2. アプリケーション全体の完全なページは1つだけです。
  3. ページ内のナビゲーションリンクをクリックしても、ページは更新されませんが、ページの部分的な更新のみが行われます。
  4. データはajaxリクエストを介してフェッチする必要があります。

第三に、ルーティングの理解

(1)ルーティングとは何ですか?

1.ルートはマッピング関係のセット(キーと値)です
。2。キーはパスであり、値は関数またはコンポーネントの場合があります。

(2)ルーティングの分類

バックエンドルーティング

  1. 理解する:値は、クライアントから送信された要求を処理するために使用される関数です。
  2. 作業プロセス:サーバーは要求を受信すると、要求パスに従って一致する関数を見つけて要求を処理し、応答データを返します。

フロントエンドルーティング

  1. 理解:値は、ページのコンテンツを表示するために使用されるコンポーネントです。
  2. 作業プロセス:ブラウザのパスが変更されると、対応するコンポーネントが表示されます。

(3)、いくつかの注意点

  • ルーティングコンポーネントは通常フォルダに配置pagesされ、一般的なコンポーネントは通常componentsフォルダに配置されます
  • 切り替えることにより、ルーティングを非表示にするコンポーネントはデフォルトで自動的に破棄され、必要に応じてマウントされます。
  • 各コンポーネントには独自の$routeプロパティがあり、独自のルーティング情報を格納します
  • アプリケーション全体で1つだけでrouterあり、コンポーネントの$routerプロパティから取得できます。

(4)ルーティングの基本的な使用法

ここに画像の説明を挿入
ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入

第4に、ルーティングのネスト(マルチレベルルーティング)

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

5.ルートのクエリパラメータ

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

6.ルートの命名

機能:ルーティングジャンプを簡素化します

使用方法:ルートに名前を付けます
ここに画像の説明を挿入

ジャンプを簡素化する
ここに画像の説明を挿入

7、ルートのparamsパラメータ

ルートを構成し、paramsパラメーターを受け取ることを宣言します
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/m0_46374969/article/details/121494136