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>

ルーティングパラメータ

方法1

ルータ

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>

ジャンプ.vue

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

受信.vue

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

ルーティングパスに :id のようなルートマッチを記述する場合 (「:」はバックエンドマッチに相当し、「id」は名前付きグループの名前に相当します)。

方法2

ルータ

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

ジャンプ.vue

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

受信.vue

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

コンポーネント間でパラメータを渡す4つの方法

// 1) localStorage: データを永続的に保存する
// 2) sessionStorage: データの一時保存 (ページを更新してもデータはリセットされず、タブを閉じて再度開くとリセットされます)
// 3) Cookie: データの一時的または永続的な保存（有効期限によって決定）
// 4) vuex ウェアハウス (store.js): 一時保存データ (ページ更新データリセット)

vuex 倉庫プラグイン

store.js 構成ファイル

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

任意のコンポーネントのリポジトリ変数に値を割り当てる

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

2 つ目は、ミューテーションで提供されるセッターメソッドです。このメソッドは最終的に状態に値を渡しますが、このセッターメソッドに検証やその他の判断を記述することができます。

任意のコンポーネントの倉庫変数の値を取得する

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

vue-cookie プラグイン

インストール

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

main.js 構成

// 最初のタイプ 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('トークン');

注: Cookie は通常、トークンを保存するために使用されます。

// 1) トークンとは何か: セキュリティ認証のための文字列
// 2) 誰が生成したか: バックグラウンドで生成された
// 3) 誰が保存するか: バックグラウンドストレージ (セッションテーブル、ファイル、メモリキャッシュ)、フロントエンドストレージ (Cookie)
// 4) 使用方法: サーバーはフロントデスクへのフィードバックを生成し (ログイン認証プロセス)、フロントデスクはそれをバックデスクに送信して認証を完了します (ログイン後のリクエスト)
// 5) フロントエンドとバックエンドの分離プロジェクト: バックエンドがトークンを生成し、フロントエンドに返す => フロントエンドがそれを独自に保存し、トークンを使用してリクエストを送信する => バックエンドがトークンの検証を完了する => バックエンドがログインしたユーザーを取得する

(前述のように、コンポーネント間のパラメータ受け渡しはクッキーを使っても実現できます。クッキーにはデフォルト値が設定されていないため、空の値であればビュー関数で取得する値も空になります。そのため、ビュー関数でもデフォルト値を設定し、クッキーで渡された値を判定する必要があります。空の値でない場合はデフォルト値をそれに置き換えてからレンダリングします)

axios プラグイン

インストール

>: cnpm をインストール axios

main.js 構成

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 = 真

要素UIプラグイン

インストール

>: cnpm i 要素UI -S

main.js 構成

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

使用

公式サイトによると https://element.eleme.cn/#/zh-CN/component/installation api

要約する

Vue のルートパラメータの受け渡しとクロスコンポーネントパラメータの受け渡しに関するこの記事はこれで終わりです。Vue ルーティングとクロスコンポーネントパラメータの受け渡しに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: