ルーティングジャンプ
。この$のrouter.push（ '/もちろん'）;
。この$のrouter.push（{名：もちろん}）;
。この$のrouter.go（-1）;
。この$のrouter.go（1）;
课程页</ルータ・リンク> < "/コース" =へのルータのリンク>
<ルータリンク：= "{名： 'コース'}" に>课程页</ルーターリンク>
ルーティングパラメータの受け渡し
最初の
router.js
ルート：[
// ...
{
パス： '/コース/：ID /詳細'
名前：「コースの詳細」、
コンポーネント：CourseDetail
}、
]
ジャンプ.vue
<テンプレート>
<！ - タグジャンプ - >
<ルータリンク：= "` /コース/ $ {course.id} / detail`" へ> {{course.name}} </ルータリンク>
</テンプレート>
<スクリプト>
// ...
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。
}
これは、クロス・コンポーネントパラメータ渡しの4つの方法で行うことができます
// 1）のlocalStorage：永続的データを格納
// 2）のsessionStorage：一時データの保存（データはページがリセットされません更新し、シャットダウンして再オープンタブデータのリセット）
// 3）クッキー：有効期限によって決定されたデータの一時的または永続的なストレージ（）
// 4）vuex倉庫（store.js）：データの一時保存（ページデータのリセットをリフレッシュします）
vuex倉庫プラグイン
store.jsプロフィール
輸出デフォルト新しいVuex.Store（{
状態：{
タイトル：「デフォルト」
}、
変異：{
//変異は、状態プロパティのセッターを提供します
//セッターメソッドランダムに名前が、固定パラメータリスト2：状態、newValueに
setTitle（状態、newValueに）{
state.title = newValueに。
}
}、
行動： {}
}）
倉庫変数代入の任意の構成要素で
この。$ store.state.title = 'newTitleの'
この。$のstore.commit（ 'のsetTitle'、 'newTitleの'）
倉庫値は、いずれかの可変成分を取ります
console.log（これます$ store.state.title）
VUE-クッキープラグイン
インストール
main.js設定
//最初の
「VUE-クッキー」//インポートウィジェットからのインポートクッキー
Vue.use（クッキー）; //プラグインをロード
新しいビュー（{
// ...
クッキーは、//設定はプラグインのプロトタイプ$クッキーを使用しています
。}）$マウント（ '＃アプリ'）;
// 2番目
「VUE-クッキー」//インポートウィジェットからのインポートクッキー
。Vue.prototype $クッキー=クッキー; //直接設定プラグインのプロトタイプ$クッキー
使用
//追加（変更する）：キー、値、EXP（有効期限）
// 1 = '1S' | 「1メートル」| '1H' | '1D'
。この$のcookies.set（ 'トークン'、トークン、 '1Y'）;
//チェック：キー
。this.token =この$のcookies.get（ 'トークン'）;
//削除：キーを
。この$のcookies.remove（ 'トークン'）;
注：クッキーは、一般的にトークンを格納するために使用されています
安全認証の文字列：// 1）トークンとは何ですか
背景が生成：生成// 2）
// 3）誰ストレージ：背景ストレージ（セッション表、ファイル、メモリバッファ）、フロントストレージ（クッキー）
// 4）使用方法：ミスター・サーバは、要求後に必要な認証（ログインを完了するために、バックグラウンドにフォアグラウンドに提出フロントデスク（ログイン認証プロセス）にバックアップします）
// 5）前面と背面のアイテム分離：=>完全なバックグラウンドチェックトークン=>背景には、ユーザのログインを取得運ぶ背景生成トークンを、フロントに戻る=>自分のフォアグラウンドメモリ、トークン要求メッセージ
axiosプラグ
インストール
main.js設定
「axios」//インポートウィジェットからの輸入axios
。Vue.prototype $ axios = axios; //直接プラグイン構成のプロトタイプの$ axios
使用
this.axios（{
URL：「要求インタフェース」
方法：「取得|ポスト要求」
{投稿データを提出等} ,:データ
params：{データが提出されます}
）コールバック関数}）。次に、（コールバック要求が成功した）.catch（要求が失敗しました
ケース
// get要求
この。$のaxios（{
URL： 'http://127.0.0.1:8000/test/ajax/'
方法：「取得」、
params：{
ユーザ名：this.username
}
}）。次に、（関数（応答）{
console.log（レスポンス）
}）。キャッチ（関数（誤差）{
console.log（エラー）
}）;
// POSTリクエスト
この。$のaxios（{
URL： 'http://127.0.0.1:8000/test/ajax/'
方法：「ポスト」
データ：{
ユーザ名：this.username
}
}）。次に、（関数（応答）{
console.log（レスポンス）
}）。キャッチ（関数（誤差）{
console.log（エラー）
}）;
クロスドメインの問題（同一生成元ポリシー）
//バックフォアグラウンドにリクエストを受けて、データの受信要求情報を受信することができる、要求された情報が送信され、ローカルサーバの要求に見つからない、データの拒絶反応は、これはと呼ばれている - クロスドメインの問題（元ポリシーCORS）
//クロスドメインの状況につながる、3つがあります
// 1）一貫性のないポートであります
// 2）IPの矛盾
// 3）の契約
ジャンゴ・CORS-ヘッダモジュール - //ジャンゴを解決する方法
// 1）インストール：PIP3インストールジャンゴ・CORS-ヘッダ
// 2）登録：
INSTALLED_APPS = [
...
'corsheaders'
]
// 3）セットミドルウェア：
ミドルウェア= [
...
'corsheaders.middleware.CorsMiddleware'
]
// 4）クロスドメイン設定：
CORS_ORIGIN_ALLOW_ALL =真
プラグ要素-UI
インストール
main.js設定
「要素-UI」からインポートElementUI。
インポート '要素-UI / libに/テーマチョーク/ index.css';
Vue.use（部品）
使用
公式サイトによれば、https://element.eleme.cn/#/zh-CN/component/installation API