ルーティングジャンプ

二つの方法
1. URLジャンプ直接
    このrouter.pushの$（「/コース」）;. 
    ; <-Linkルーター=「/コース」へ>コースページ</ルータリンク> 
のルーティング2.エイリアスはジャンプ
    ;.：この$のrouter.push（{コース名}）
    <-Linkルータへ= "{名： 'コース'}">コースページ</ルータリンク>

また、ジャンプアップとページダウンすることができます

戻る前に
、この$のrouter.go（-1）;. 
（ケースが歴史を持っている必要があります）次のページへ
この$のrouter.go（1）。

II。ルーティング質量参加

二つの方法

最初の

router.js

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

ジャンプ.vue

<テンプレート> 
    <！ -标签跳转- > 
    ：{{course.name}} </ルータ・リンク> < "/ detail` /コース/ $ {course.id}`"=へのルータのリンク> 
< /テンプレート> 
<スクリプト> 
    // ... 
    goDetail（）{ 
        //逻辑跳转
        。この$のrouter.push（ `/コース/ $ {this.course.id} / detail`）。
    } 
</ SCRIPT>

.vueを受けます

作成した（）{ 
    。idは=この$のroute.params.idてみましょう。
}

第2

router.js

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

ジャンプ.vue

<テンプレート> 
    <！ -标签跳转- > 
    <ルータリンク：=に"{ 
            名： 'コースの詳細'、
            クエリ：{ID：course.id} 
        }"> {{course.name}} < /ルータ・リンク> 
</テンプレート> 
<スクリプト> 
    // ... 
    goDetail（）{ 
        //逻辑跳转
        この$のrouter.push（{。
            名前： 'コースの詳細'、
            クエリ：{ 
                ID：this.course .ID 
            } 
        }）。
    } 
</ SCRIPT>

.vueを受けます

作成した（）{ 
    。idは=この$のroute.query.idてみましょう。
}

III。クロス成分質量参加

1.あなたは、4ウェイクロスコンポーネントパラメータの引き渡しを完了することができます

// 1）のlocalStorage：永続的データを格納
// 2）のsessionStorage：データの一時保存（データはページがリセットされません更新し、シャットダウンして再オープンタブデータのリセット）
// 3）クッキー：一時的または恒久的に保存されたデータ（有効期限によって、決定するための時間）
// 4）vuex倉庫（store.js）：データの一時保存（）ページデータのリセットをリフレッシュ

2.vue倉庫プラグイン

store.jsプロフィール

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

任意成分で変数倉庫に割り当てることができ

この。$ store.state.title = 'newTitleの' 
これ。$のstore.commit（ 'のsetTitle'、 'newTitleの'）

任意のコンポーネントの変数値倉庫を取ることができます

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

III。設定のVUE-クッキーとプラグインaxios

1. VUE-クッキープラグ

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

トークンは何1 
    トークンが安全認証の文字列で
生成された2 
    データフォアグラウンドを送信し、バックグラウンドのトークンは、上のデータ伝送に基づいて生成された
3人のストレージ
    バッキングストア（セッション表、ファイル、メモリバッファ）、フロントストレージ（クッキー）
どのように使用する4. 
    フロントデスク（ログイン認証プロセス）にバックアップするミスター・サーバを、認証を完了するために、バックグラウンドにフォアグラウンドに提出（申請後に必要なログイン）
台湾項目5の分離前と後の
    トークンを運ぶ、送信、フロントデスク自分の店に返されたトークンバックグラウンドレンダリング、ログインユーザが戻って取得するための要求、バックグラウンドチェックが完了すると、トークン、

プラグインVUE-クッキーをインストールします。

コマンド入力端子には
>：VUE-クッキーをインストールcnpm

main.js設定ファイル

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

// 2番目の
輸入クッキー「VUE-クッキー」から // インポートプラグ
Vue.prototype $クッキー=クッキー;. // $プロトタイプのプラグは直接クッキーを配置されました

使用

//增（改）：キー、値、EXP（过期时间）
// 1 = '1S' | 「1メートル」| '1H' | '1D' 
。この$のcookies.set（ 'トークン'、トークン、 '1Y'）; 

//查：キー
。this.token =この$のcookies.get（ 'トークン'）; 

//删：キー
。この$のcookies.remove（ 'トークン'）;

2. axiosプラグ

インストール

>：axiosをインストールcnpm

main.js設定

'axios' //インポートプラグからの輸入axios 
直接Axios配置さVue.prototype $ axios = axios ;. // $プロトタイププラグ

使用

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

ケース

//取得请求
この$ axios。（{ 
    URL： 'http://127.0.0.1:8000/test/ajax/'、
    メソッド： '取得' 
    のparams：{ 
        ユーザー名：this.username 
    } 
}）。その後、（機能（応答）{ 
    にconsole.log（応答）
}）キャッチ（関数（誤差）{ 
    にconsole.log（エラー）
}）。

//ポスト请求
この$ axios。（{ 
    URL： 'http://127.0.0.1:8000/test/ajax/'、
    方法： 'ポスト'、
    データ：{ 
        ユーザー名：this.username 
    } 
}）。その後、（機能（応答）{ 
    にconsole.log（応答）
}）キャッチ（関数（誤差）{ 
    にconsole.log（エラー）
}）。

ミドルウェアCSRFを切り出しする必要があるバックエンド、およびクロスドメインの問題に対処する必要性

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

//は、要求された情報が送信され、ローカルサーバの要求に見つからない、データ拒絶反応をバックフォアグラウンドに要求を受けて、データの受信要求情報を受信することができる、これはと呼ばれている-クロスドメインの問題（元ポリシーCORS）

/ 3の場合は/クロスドメインの結果
、矛盾ポート）1 @ 
// 2）IP矛盾
の// 3）契約

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

3. 要素プラグインのUI