Comment transmettre une valeur via le framework vuejs

Méthode de transfert de valeur de routage du framework Vuejs : 1. Appelez directement l'instruction "$router.push(...)" pour transporter les paramètres pour sauter pour transférer la valeur 2. Utilisez axios pour transférer la valeur, vous pouvez appeler "this" ; .$axios. get(...)" pour transmettre la valeur.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Résumez le transfert de valeur de route dans Vue, qui implique l'utilisation d'axios

Il est facile de confondre ces méthodes lors de l'utilisation de

Méthode 1

Valeur de transfert de composant

Configuration de routage correspondante :

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

Remarque : Be assurez-vous d'ajouter /:id après la route. L'identifiant n'est qu'un nom de paramètre, cela n'a pas d'importance, mais il doit être cohérent avec le nom du paramètre lors du passage et de la réception/:id，id 只是一个参数名，无所谓，但是需要与传递和接收时的参数名保持一致

直接调用$router.push实现携带参数跳转

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

注：在跳转传参时，path后面是用两个反引号包起来的，而不是双引号或者单引号，并且是使用${}的形式把所需要的参数传过去

在子组件中进行接收

this.$route.params.id

注：是route，而不是router

---

如果使用路由属性中的name来确定匹配的路由进行传参的话，需要这样：

对应路由的配置：

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

携带参数跳转：

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

注：这里不能使用/:id来传递参数了，因为父组件中，已经使用params来携带参数了。

子组件中接收参数：

this.$route.params.id

再次强调，是route，不是router

用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

方式二

组件传值

对应的路由配置：

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

携带参数跳转：

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

注：这里使用的是query

然后在子组件中进行接收：

this.$route.query.id

注：传递时参数名一定要保持一致，接收时，不要用params了，要使用query进行接收

用query传参，用path属性对应跳转路径，类似于get提交，参数是在路径里显示的。

axios传值

如果要在axios中使用的话，可以这样：

例如：

前端调用后端接口代码：

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

其实这样是和上面再写一个query是一样的，不过这样更加简便

注：是用两个反引号包起来，后面使用的是 ? 号，而不是 /

使用这种方式的话，可以一次性在地址栏中传递多个值，中间用 & 符进行连接，是get请求

因为浏览器的地址栏有长度限制，所以如果参数过多时，不建议用这种方式

在后端中进行接收：

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

注：这里不要在/delete后面加东西了，接收的时候用query的方式进行接收

使用这样的方式进行传值，也是会在地址栏中显示的
地址栏链接示例：http://127.0.0.1:3000/api/user/delete?name=zhangsan&age=10

特别提醒

• 如果用params进行传参，一定要用name属性来对应跳转路径
• 如果用query进行传参，一定要用path属性来对应跳转路径

方式三

这里只说 axios传值

axios传值

当我们调用后端接口要在数据库中插入数据的时候（添加数据），可以这样使用：

前端调用后端接口：

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

等号后面的name和age是你从表单里得到的数据，然后保存到了data里面，然后从data里面拿出来

在后端进行接收：

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

注：这里接收时用body进行接收，是post

Appelez $router.push réalise le saut avec les paramètres🎜rrreee🎜🎜Remarque : lors du saut pour passer des paramètres, le chemin est suivi de deux guillemets doubles ou de guillemets simples, et utilisez le forme de ${} pour transmettre les paramètres requis🎜🎜🎜Recevez-le dans le sous-composant🎜rrreee🎜🎜Remarque : Il s'agit de route , au lieu de router code>🎜🎜<hr>🎜Si vous utilisez le <code>name dans l'attribut de routage pour déterminer l'itinéraire correspondant pour passer les paramètres, vous devez faire ceci : 🎜🎜La configuration de l'itinéraire correspondant : 🎜rrreee🎜 Sauter avec les paramètres : 🎜rrreee🎜🎜 Remarque : /:id ne peut pas être utilisé pour transmettre des paramètres ici, car params a été utilisé dans le composant parent. Les paramètres sont transportés. 🎜🎜🎜Paramètres reçus dans le sous-composant : 🎜rrreee🎜🎜Encore une fois, c'est route, pas router🎜🎜🎜🎜🎜 Utiliser params pour transmettre les paramètres, utilisez l'attribut name pour correspondre au chemin de saut, similaire à la soumission post, les paramètres n'apparaîtront pas dans le chemin de saut. 🎜🎜🎜

---

transfert de valeur axios🎜🎜Lorsque nous devons importer des données frontales vers l'interface back-end🎜Nous pouvons également utiliser cette méthode pour transférer des valeurs🎜 🎜Par exemple : 🎜🎜Code pour appeler l'interface backend dans le front-end : 🎜rrreee🎜Recevoir dans le backend : 🎜rrreee🎜🎜Notez qu'il s'agit d'une requête get🎜🎜🎜🎜Cette méthode de requête sera affichée dans la barre d'adresse 🎜Lien de la barre d'adresse Exemple : http://127.0.0.1:3000/api/user/find/10🎜🎜

Méthode 2🎜

Transmission du composant La configuration de routage correspondant à la valeur 🎜🎜 : 🎜rrreee🎜 Jump avec paramètres : 🎜rrreee🎜🎜Remarque : La requête🎜🎜🎜 est utilisée ici puis reçue dans le sous-composant : 🎜rrreee🎜🎜Remarque : Les noms des paramètres doivent être cohérents lors du passage. Lors de la réception, n'utilisez pas params. Utilisez query pour recevoir. code > Passer les paramètres, utilisez l'attribut path pour correspondre au chemin de saut, similaire à la soumission get, les paramètres sont affichés dans le chemin. 🎜🎜🎜

transfert de valeur axios🎜🎜Si vous souhaitez l'utiliser dans axios, vous pouvez le faire comme ceci :🎜🎜Par exemple :🎜🎜Le front-end rappelle le back -end code d'interface :🎜rrreee🎜En fait, c'est C'est la même chose que d'écrire une autre requête ci-dessus, mais c'est plus facile de cette façon🎜🎜🎜Remarque : il est entouré de deux guillemets, suivis du ? signez au lieu de /🎜🎜🎜🎜 De cette façon, plusieurs valeurs peuvent être transmises dans la barre d'adresse à la fois, et l'esperluette est utilisée pour les connecter. Il s'agit d'une requête get🎜🎜🎜. 🎜Parce que la barre d'adresse du navigateur a une limite de longueur, donc s'il y a trop de paramètres, il n'est pas recommandé d'utiliser cette méthode pour recevoir dans le backend : 🎜rrreee🎜🎜Remarque : n'ajoutez rien après /delete ici, utilisez lors de la réception de Recevoir via requête🎜🎜🎜🎜Utilisez cette méthode pour transmettre la valeur, qui sera également affichée dans la barre d'adresse🎜Exemple de lien dans la barre d'adresse : http:/ /127.0.0.1:3000/api/user/delete ?name=zhangsan&age=10🎜🎜

Rappel spécial🎜

• Si vous utilisez params code> pour transmettre les paramètres, vous devez utiliser <code>name L'attribut pour correspondre au chemin de saut
• Si vous utilisez query pour transmettre les paramètres, assurez-vous d'utiliser l'attribut path pour correspondre au chemin de saut
li>

Méthode 3🎜🎜Ici, nous ne parlons que de la valeur de passage d'axios 🎜

axios passant la valeur🎜🎜Lorsque nous appelons Lorsque l'interface finale souhaite insérer des données dans la base de données (ajouter des données), vous pouvez l'utiliser comme ceci : 🎜🎜Le front-end appelle l'interface back-end : 🎜rrreee🎜Le nom et l'âge après le signe égal sont les données que vous obtenez du formulaire, puis enregistrez-les dans les données à l'intérieur, puis retirez-les des données🎜🎜Recevez-le dans le backend :🎜 rrreee🎜🎜Remarque : utilisez body pour recevoir lors de la réception ici, qui est une demande post🎜🎜

Généralement, lorsque nous souhaitons soumettre des données au serveur, nous utilisons la requête post. Cette méthode de requête est sécurisée. Si vous utilisez cette méthode, les données ne seront pas affichées dans la barre d'adresse.

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!