Vueのルーティングは、プラグインのインストールと設定、パラメータの受け渡しのためにジャンプします

ルーティングジャンプ

この。router.pushの$（ '/コース' ）;               
 この$のrouter.push（{名：コース}）; 

この $のrouter.go（-1）;    // バック
この $のrouter.go（。 1）;   // 前進
 
< "/ =にルータリンクコース"> コースページを</ルーターリンク> 
<ルータのリンク：=は"{名： 'コース'}">コースページ</ router-リンク>

 

 

ルーティングパラメータの受け渡し

最初の

router.js

ルータ：
     // ... 
    { 
        パス： '/コース/：ID /ディテール' 、    
        名称： 'コース詳細' 、
        成分：CourseDetail 
    } 
]    

 

ジャンプ.vue

<テンプレート> 
    <ルータリンク：に= "` /コース/ $ {course.id} / detail`"> {{course.name}} </ルータ・リンク> 
</テンプレート> 

<スクリプト> // .. 。    goDetail（）{
            この $のrouter.push（ `/コース/ $ {。この .course.id} / detail`）。
    } </ SCRIPT>
    

 

.vueを受けます

（）は{作成した
   IDを聞かせて = この$ router.params.id。
}

 

 

第2

router.js

ルート：
     // ... 
    { 
        パス： '/コース/詳細' 、
        名称： 'コース詳細' 、
        成分：CourseDetail 
    } 
]

 

ジャンプ.vue

<テンプレート> 
    <ルータリンク：=は" { 
            名： 'コース詳細'、
            クエリ：{ID：course.id} 
        } "> {{course.name}} </ルーターリンク> 
</テンプレート> 
<スクリプト> // ...     goDetail（）{
         この。$のrouter.push（{ 
            名： 'コースの詳細' 、
            クエリ：{ 
                ID：この.course.id 
            } 
        }）; 
    } </ SCRIPT>
    

 

.vueを受けます

（）は{作成した
    IDを聞かせて = この$ route.query.id。
}

 

 

コンポーネント間のデータ交換（クロス成分パラメータパッシング）

また、コンポーネントは無関係であることができ、親と子の関係を持つことができます

メソッドは、親子関係が子の父親を通じて父親から息子に渡すことができています

私たちは、データストレージの方法によって関連付けられていないコンポーネント間のデータ交換を完了する必要があります何の親子関係が存在しない場合は、クロス部品質量の参加となっています

 

クロス成分パラメータ通過する4つの方法

1.localSorage：永久記憶データベース

2.sessionStorage：データの一時保存（データはシャットダウンして、ページデータのリセットを再オープンし、リセットされませんページを更新）

3.cookie：データの一時的または永久的なストレージ（満了イベントによって決定されます）

4.vuex倉庫（store.js）：データの一時保存（ページデータのリセットをリフレッシュします）

 

vuex倉庫（store.js）

store.js

エクスポートデフォルト 新しい新しいVuex.Store（{ 
    状態：{ 
        タイトル：「デフォルト」
    }、
    {：変異
        // 属性を提供するための変異状態セッターが
        // setterメソッド名は任意ですが、2つの固定パラメータのリスト：状態、newValueに
        setTitle（状態、newValueに）{ 
            state.title = newValueに; 
        } 
    }、
    アクション：{} 
}）

 

割り当て.vue

これ。store.state.title $ = 'newTitleの' //辞書を直接述べる

本の変異による。store.commitの$（ 'のsetTitle'、 'newTitleの'）//プロパティメソッドを

 

バリュー.vue

console.log（これます$ store.state.title）

 

 

プラグインの使用

VUE-クッキープラグイン

インストール

cnpm VUE-クッキーをインストール

 

main.js設定

// 最初の 
クッキー「クッキー-VUE」からインポート    // インポートプラグ 
Vue.use（クッキーに）;         //はプラグロード
新しい新しいヴュー（{
     // ... 
    クッキー、                  // クッキー$プラグプロトタイプを使用するように構成さを 
}）。マウント$（「＃アプリ」）; 


// 第 
クッキー「クッキー-VUE」からインポート    // インポートプラグ 
Vue.prototype $ =クッキークッキー;.     // 配置直接ウィジェットプロトタイプ$クッキー

 

使用

// （変更する）を追加：キー、値、EXP（有効期限）
// 1 = '1S' | '1M' | '1H' | '1D' 
これ。$ Cookies.set（「、 'トークン'トークン1Y ' ）; 

// チェック：キー
この .token = この。$のcookies.getを（'トークン' ）; 

//は削除：キー
この $のcookies.remove（。'トークン「）;

 

注：クッキーは、一般的にトークンを格納するために使用されています

1 。セキュリティ認証文字列：トークンは何である
 2 生産：背景には、生成された
 3 人のストレージ：背景ストレージ（セッション表、ファイル、メモリバッファ）、フロントストレージ（クッキー）
 4 。使用方法：ミスター・サーバをフロント（ログイン認証プロセス）へのフィードバック、認証のために提出された背景に前景（必須後ログイン要求）などの
項目5：背景生成トークンの分離前後ステーション、フロント=>自身のフォアグラウンドメモリ、=を運ぶトークン要請メッセージに戻り>背景完全な検証トークンは=>舞台裏を取得するにはログインしているユーザー

 

 

axiosプラグ

インストール

axiosをインストールcnpm

 

main.js設定

インポート'Axios'からAxios     // インポートプラグ 
Vue.prototype $ = Axios Axios ;.     // 配置された直接ウィジェットプロトタイプ$ Axios

 

使用

この.axios（{ 
    URL： '要求インタフェース' 、
    メソッド： '取得| POSTリクエスト' 、
    データ：提出されたデータ{ポストなど}、
    paramsが：{}データが提出され得る
}）その後、（リクエスト成功したコールバック関数）。 。キャッチ（要求失敗コールバック関数）

 

 

これを行うための前端と後端クロスドメインデータ交換の問題である場合、この場合にエラーが発生し

クロスドメインの問題（同一生成元ポリシー）

// 要求を受信し、背景前景は、受信データが要求情報を受信することができ、要求された情報が送信され、ローカルサーバのリクエスト中に見出されていない、データ拒絶反応、これは呼ばれる-クロスドメインの問題（元ポリシーCORS）

/ / 3クロスドメインの場合の結果
@ 1）一貫性のないポート
// 2）IP矛盾
// 3）契約

// ジャンゴ解決する方法-ジャンゴ・CORS-ヘッダモジュール
@ 1）インストール：PIP3インストールジャンゴ・CORS-ヘッダ
// 2）レジスタ： 
INSTALLED_APPS = [ 
    ...
     'corsheaders' 
] 
// 3）に配置された中間： 
ミドルウェア= [ 
    ...
     'corsheaders.middleware.CorsMiddleware' 
] 
// 4）ドメインを横切って配置された：。 
CORS_ORIGIN_ALLOW_ALL =真

 

 

プラグ要素-UI

インストール

cnpm I要素-UI -S

 

main.js設定

輸入 ElementUI から ' 要素-UI ' ;
インポート ' 要素-UI / libに/テーマチョーク/ index.css ' ; 
Vue.use（ElementUI）。

 

使用

公式サイトhttps://element.eleme.cn/に従い＃/ ZH-CN /コンポーネント/インストールのAPI