Vue でのルーティングパラメータの受け渡しとクロスコンポーネントパラメータの受け渡しの詳細な説明

this.$router.push('/course');
this.$router.push({name: コース});
$router.go(-1);
$router.go(1);
<router-link to="/course">コースページ</router-link>
<router-link :to="{name: 'course'}">コースページ</router-link>

this.$router.push('/course');
this.$router.push({name: コース});
$router.go(-1);
$router.go(1);
<router-link to="/course">コースページ</router-link>
<router-link :to="{name: 'course'}">コースページ</router-link>

<テンプレート>
 <!-- タグジャンプ -->
 <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</テンプレート>
<スクリプト>
 // ...
 詳細() {
 //ロジックジャンプ this.$router.push(`/course/${this.course.id}/detail`);
 }
</スクリプト>

作成された() {
 id = this.$route.params.id とします。
}

作成された() {
 id = this.$route.params.id とします。
}

<テンプレート>
 <!-- タグジャンプ -->
 <ルーターリンク:to="{
   名前: 'コース詳細',
   クエリ: {id: course.id}
  }">{{ コース名 }}</ ルーターリンク>
</テンプレート>
<スクリプト>
 // ...
 詳細() {
  //ロジックジャンプ this.$router.push({
   名前: 'コース詳細',
   クエリ: {
    id: this.course.id
   }
  });
 }
</スクリプト>

<テンプレート>
 <!-- タグジャンプ -->
 <ルーターリンク:to="{
   名前: 'コース詳細',
   クエリ: {id: course.id}
  }">{{ コース名 }}</ルーターリンク>
</テンプレート>
<スクリプト>
 // ...
 詳細() {
  //ロジックジャンプ this.$router.push({
   名前: 'コース詳細',
   クエリ: {
    id: this.course.id
   }
  });
 }
</スクリプト>

デフォルトの新しいVuex.Storeをエクスポートします({
 州： {
  タイトル: 「デフォルト値」
 },
 突然変異:
  // ミューテーションは、状態の属性に対するセッターメソッドを提供します // セッターメソッドの名前は任意ですが、パラメータリストは 2 つに固定されています: state、newValue
  setTitle(状態、新しい値) {
   state.title = 新しい値;
  }
 },
 アクション: {}
})

this.$store.state.title = 'newTitle' // 最初のタイプ this.$store.commit('setTitle', 'newTitle') // 2番目のタイプ

console.log(this.$store.state.title)

console.log(this.$store.state.title)

// 最初のタイプ import cookies from 'vue-cookies' // プラグインをインポート Vue.use(cookies); // プラグインをロード new Vue({
 // ...
 cookies, //プラグインプロトタイプ$cookiesを使用して設定
}).$mount('#app');

// 2 番目のタイプ import cookies from 'vue-cookies' // プラグインをインポート Vue.prototype.$cookies = cookies; // プラグインのプロトタイプ $cookies を直接設定

// 追加（変更）：キー、値、exp（有効期限）
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');

// チェック: キー
this.token = this.$cookies.get('token');

// 削除: キー
this.$cookies.remove('トークン');

>: cnpm をインストール axios

import axios from 'axios' // プラグインをインポート Vue.prototype.$axios = axios; // プラグインプロトタイプ $axios を直接設定

this.axios({
 url: 'リクエストインターフェース',
 メソッド: 'get|post request',
 データ: {郵送などで提出されたデータ},
 パラメータ: {送信されたデータを取得}
}).then(成功したリクエストのコールバック関数).catch(失敗したリクエストのコールバック関数)

// リクエストを取得する this.$axios({
 URL: 'http://127.0.0.1:8000/test/ajax/',
 メソッド: 'get'、
 パラメータ: {
  ユーザー名: this.username
 }
}).then(関数 (応答) {
 console.log(応答)
}).catch(関数(エラー) {
 コンソール.log(エラー)
});

// リクエストを投稿する this.$axios({
 URL: 'http://127.0.0.1:8000/test/ajax/',
 メソッド: 'post'、
 データ： {
  ユーザー名: this.username
 }
}).then(関数 (応答) {
 console.log(応答)
}).catch(関数(エラー) {
 コンソール.log(エラー)
});

// バックエンドはフォアグラウンドからのリクエストを受け取り、フォアグラウンドデータとリクエスト情報を受け取ることができます。 要求された情報が自身のサーバーからのリクエストではないことがわかり、データへの応答を拒否します。 この状況はクロスドメイン問題と呼ばれます (同一生成元ポリシー CORS)

// クロスドメイン エラーの原因は 3 つあります // 1) ポートの不一致 // 2) IP の不一致 // 3) プロトコルの不一致 // Django で解決する方法 - django-cors-headers モジュール // 1) インストール: pip3 install django-cors-headers
// 2) 登録:
インストール済みアプリ = [
 ...
 「コースヘッダー」
]
// 3) ミドルウェアをセットアップする:
ミドルウェア = ​​[
 ...
 'corsheaders.middleware.CorsMiddleware'
]
// 4) クロスドメインを設定する:
CORS_ORIGIN_ALLOW_ALL = 真

>: cnpm i 要素UI -S

'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
Vue.js の ElementUI 要素をオーバーライドします。