Vueのは、チュートリアルパートVI(ルーティングとaxios)はじめに

ルーティング

Vue.js VUE-ルータのルートは、ライブラリをロードする必要があります。

NPMインストールします。

 NPMショックルータを設置 

例を使用します。

1  // ルータ/ index.js 
2インポートVueの'VUE'から
 3 'VUE-ルータ'からインポートルータ
 4 '@ /ページ/ログイン'からインポートするログイン
 5 '@ /ページ/ホーム'からインポートホーム
 6  
7  ヴュ。使用(ルータ)
 8 CONSTルータ= 新しいルータ({
 9つの   ルート:[
 10      {
 11        パス: '/' 12        名: 'ログイン' 13        成分:ログイン
 14      }
 15      {
 16        パス: '/ホーム' 17       名称:「ホーム」18は       、ホーム:成分
 19。        メタ:{ // メタが展開され、デフォルトブランク
20は          PrivilegeLevel :. 1 // カスタムフィールド、アクセス許可レベルを表すために本明細書中で使用されている
21        }
 22      }
 23    ]
 24  })
 25  
26でエクスポートデフォルトルータ。

パスのURLである、パス、名前、ルートの名前であり、コンポーネントはコンポーネントで、メタプロパティを拡大することで、あなたがカスタマイズすることができます。

 

知識を展開

一例としてルータVueRouter、グローバルルータオブジェクトの同等は、私たちは、ページジャンプを達成するためにそれを使用することができます。

引数はありません

1  。$のrouter.push( '/ホーム' 2  の$ router.push({名: 'ホーム'。})
 3  の$ router.push。({パス: '/ホーム'})

クエリパラメータの受け渡し

1  。$のrouter.push({名: 'ホーム'、クエリ:{ID: '1' }})
 2  の$ router.push({パス: '/ホーム'、クエリ:{ID: '1' }})
 3  // HTML取参$ route.query.id 
4  // スクリプト取参これ。$ route.query.id

paramsパラメータの受け渡し

。1   $ Router.push({名: 'ホーム'、のparams:{ID:」1' }})。// 唯一の名前で
2  
。3  // 設定ルートパス: "/ホーム/:ID"またはパス: 「/ホーム:ID」、
4  
5  // 最初の時間は、要求するページIDが消えリフレッシュするために、パスを設定していない
6  
7  // 構成パスを、ページIDが予約されますリフレッシュ
8  
9  // HTMLは、高麗人参の$ route.paramsを取ります。 ID 
10  
。11個の // スクリプトのパラメータは、これを取る。$ route.params.id

クエリとのparams差:

まだのparamsを使用してジャンプページのURLは、同様のバックスプライスパラメータになります後?ID = 1、これの非重要性は、パスワードなど、渡したり、ページIDを更新することができ、同様の取得を問い合わせます

同様のポスト、ページのURLステッチパラメータがないバック休憩の後が、ページIDが消えます更新されますparamsは。

 

axios(アヤックス)

Axiosは、HTTPベースのライブラリーの約束である、あなたは、ブラウザとのNode.jsを使用することができます。アヤックスと一致しますが、より実用的なaxiosアクション。

NPMインストール:
 NPM Axiosをインストール 

取得する

1  Axios
 2   に.get( 'https://127.0.0.1/user' 3。 {
 4。    paramsは:{ // パラメータ
5            はuserId :. 1 6。            パスワード:123345
 。7            }
 。8  })
 。9   .then(応答=> {
 10   // 応答の結果が返される
。11  })
 12であるキャッチ関数(誤差){ // 要求が失敗
である13     にconsole.log(エラー);
 14   })。

役職

1  Axios
 2   .post( 'https://127.0.0.1/user' 3。   { // パラメータ
4。    はuserId :. 1 5。    パスワード:123345
 。6  })
 7。   .then(応答=> {
 8。  // レスポンス返信結果
9  })
 10キャッチ関数(誤差){ // 要求が失敗した
11。    にconsole.log(エラー);
 12れます   })。

すべての方法を要求します。

  • axios.request(設定)
  • axios.get(URL [、設定])
  • axios.post(URL [、データ[設定]])
  • axios.delete(URL [、設定])
  • axios.head(URL [、設定])
  • axios.put(URL [、データ[設定]])
  • axios.patch(URL [、データ[設定]])

応答結果(応答オブジェクト):

1 axios.get( "/ユーザ" 2    .then(関数(応答){
 3      にconsole.log(response.data); // サーバによって提供される応答
4。      にconsole.log(のResponse.Status); // HTTP状態コード
5      はconsole.log(response.statusText); // サーバのステータス情報からHTTPレスポンス
6      にconsole.log(Response.Headers); // サーバ応答のヘッダ
7      にconsole.log(response.config); // 要求構成情報
8    })。

axiosのデフォルト

私たちが使用axiosの多くを必要とするときに冗長構成を書くたびに管理するために時間がかかり、困難である場合には、axiosはデフォルト設定を設定することができますあなたが呼ぶとき、それはもはや一つ一つを設定することはできません。
グローバル:

1つの // デフォルトアクセスバックエンドサーバのURL 
2 axios.defaults.baseURL = 'http://127.0.0.1:3000/' ;
 3 axios.defaults.headers.common [ '許可'] = AUTH_TOKEN;
 4  // POSTデフォルトのデータ型
5。 axios.defaults.headers.post [「型コンテンツ」] =「ファイルアプリケーション/ JSON」;

カスタム(新規インスタンスは、グローバル設定を上書きします):

1つの // 設定されたデフォルトの例を作成するために設定するための値
2  のvar =インスタンスをaxios.create({
 3のbaseURL: 'http://127.0.0.1:3001/'
 4  });
 5。 instance.defaults.timeout = 2500 ;
 6。インスタンス.get( '/ longRequest' 、{
 7タイムアウト:5000 // 設定長い時間オーバーライド要求タイムアウトかかる既知
8 })。

 

おすすめ

転載: www.cnblogs.com/JHelius/p/11690910.html