vuejsフレームワークのルートで値を渡す方法

Vuejs フレームワークのルーティング値転送方法: 1. "$router.push(...)" ステートメントを直接呼び出してパラメータを運び、値を転送するためにジャンプします; 2. axios を使用して値を転送します。 「this .$axios.get(...)」ステートメントを呼び出して値を渡すことができます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

axios の使用を含む、Vue でのルーティング値の転送を要約します。

これらのメソッドを使用する場合は混同しやすいです

メソッド A

コンポーネントは値

と対応するルーティング設定を渡します:

{
	 path: '/detail/:id',
	 name: 'Detail',
	 component: Detail
}

注: ルートの後に必ず /:id を追加してください。パラメータ名だけでも構いませんが、受け渡しする際はパラメータ名と一致させる必要があります

直接呼び出し$router.pushパラメータ付きジャンプを実現する

this.$router.push({ path:`/detail/${id}` })

注: パラメータを渡すためにジャンプする場合、path の後に二重引用符や一重引用符の代わりに 2 つのバッククォートが続き、${} が使用されます。

サブコンポーネントで受け取ります

this.$route.params.id

注: これは router# ではなく route です

---

##ルーティング属性で

name を使用して一致するルートを決定し、パラメータを渡す場合は、次のことを行う必要があります:

Configuration対応するルートの:

{
    path: '/detail',
    name: 'Detail',
    component: Detail
}

パラメータ付きジャンプ:

this.$router.push({
  name: 'Detail',
  params: {
	id: id
  }
})

注: 親コンポーネント であるため、ここでパラメータを渡すために /:id を使用することはできません。 params はパラメータを運ぶために使用されています。

サブコンポーネントでパラメーターを受信します:

this.$route.params.id

繰り返しますが、router# ではなく route です。

#params を使用してパラメーターを渡し、name 属性を使用してジャンプ パスに対応させます (post 送信と同様)。パラメータはジャンプ パスには表示されません。

axios 値の受け渡し

---

フロントエンド データをバックエンド インターフェイスに取り込む必要がある場合

値を渡すこともできます。この方法で

例:

フロントエンドでバックエンド インターフェイスを呼び出すコード:

this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)

バックエンドでの受信:

router.get('/find/:id',(req,res)=>{
	//接收let id = req.params.id
})

get リクエストであることに注意してください

このようなリクエスト メソッドはアドレス バーに表示されます

アドレス バーのリンクの例: http://127.0.0.1:3000/ api/user/find/10

メソッド 2

値を渡すコンポーネント

対応するルーティング設定:

{
	 path: '/detail',
	 name: 'Detail',
	 component: Detail
}

パラメータを指定してジャンプ:

this.$router.push({
	path:'/detail',
	query:{
		id:id
	}
})

注:

query はここで使用され、サブコンポーネントで受信されます:

this.$route.query.id

注:渡すときはパラメーター名を使用する必要があります。一貫性を保ってください。受信時は、

params を使用せず、query を使用して

# を受け取ります。

##query## を使用します。#Pass パラメーターを使用します。

getsubmit と同様に、ジャンプ パスに対応する path 属性を使用します。パラメーターはパスに表示されます。 axios パス値

axios で使用したい場合は、次のようにすることができます:

例:

フロントエンドはバックエンドインターフェイスコードを呼び出します:

this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)

実際、これは上記の別の

クエリ

を書くのと同じですが、これはより簡単です

注: バックティックを 2 つ使用します。まとめて、/

の代わりに ? 記号を使用します。このようにして、アドレス バーに複数の値を一度に渡して接続することができますYesget

Request

ブラウザのアドレス バーには長さ制限があるため、アドレス バーがある場合はこの方法を使用することはお勧めできません。パラメータが多すぎます

バックエンドで受信します:

router.get('/delete'(req,res)=>{
let name = req.query.name;
let age = req.query.age;
})

注: ここでは

/delete

の後には何も追加せず、

query# を使用してください。 ## 受信時 Receive このメソッドを使用して値を渡すと、アドレス バーに アドレス バー リンクの例が表示されます: http://127.0.0.1: 3000/api/ user/delete?name=zhangsan&age=10

特別な注意事項

params

を使用してパラメータを渡す場合は、次のようにする必要があります。

name

属性はジャンプ パスに対応します
• query を使用してパラメータを渡す場合は、ジャンプ パスに対応する path
属性を使用する必要がありますpath
• メソッド 3ここでは、axios 値の受け渡しについてのみ説明します

axios 値の受け渡し

#バックエンド インターフェイスを呼び出すときデータベースにデータを挿入します (データを追加します)。次のように使用できます:

フロントエンドはバックエンド インターフェイスを呼び出します:

this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})

等号の後の名前と年齢は次のとおりです。フォームから取得したデータはデータに保存され、データから取得されます。

出てきてバックエンドで受信します:

router.post('/add',(req,res)=>{
let name = req.body.name;
let age = req.body.age;
})

注:ここで受信する場合は

body

を使用します。これは

post

request

です

通常、サーバーにデータを送信する場合は、post リクエストを使用します。このリクエスト メソッドは安全です。このメソッドを使用すると、データはアドレス バーに表示されません。

関連する推奨事項:「vue.js チュートリアル 」

以上がvuejsフレームワークのルートで値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。