Quelles sont les trois façons de transmettre des paramètres dans Vue ?-Voir.js-php.cn

Quelles sont les trois façons de transmettre des paramètres dans Vue ?

青灯夜游

Libérer： 2023-01-13 00:45:19

original

27831 Les gens l'ont consulté

Il existe trois façons de transmettre des paramètres dans Vue : 1. Utilisez l'attribut name de la route pour transmettre les paramètres et recevez les paramètres via "$route.name" 2. Transmettez les paramètres via l'attribut to dans le routeur ; -link ; 3. Utilisez le chemin pour faire correspondre les composants de routage et l'URL pour transmettre les paramètres.

Quelles sont les trois façons de transmettre des paramètres dans Vue ?

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

La première méthode : utiliser le nom pour passer

Un nom est apparu lors de la configuration du routage auparavant, mais je ne sais pas quelle est son utilisation spécifique is , qui peut être utilisé pour transmettre des paramètres dans le routage. Écrivez les noms des routes dans index.js

Paramètres de réception :

Ajoutez

<p>我是router-name:{{$route.name}}</p>

Copier après la connexion

< à la page où nous devons le recevoir 🎜>

Par exemple, ce que je reçois ici est dans APP.vue. J'espère que les paramètres pourront être vus en changeant de page.

Regardez les résultats :

Mais cette méthode n'est pas couramment utilisée car nous pensons qu'elle n'est pas très régulière .

Deuxième : utilisez l'attribut to dans le lien du routeur

Utilisez le to dans le lien du routeur pour transmettre les paramètres, voir la syntaxe :

<router-link v-bind:to="{name:&#39;xxx&#39;,params:{key:value}}"></router-link>

Copier après la connexion

a. Tout d'abord : to doit être lié

b Les paramètres sont transmis sous une forme similaire aux objets

c.name est ce que nous prenons lorsque ; configuration du routage Nom

d. Les paramètres se présentent également sous forme d'objets.

Faisons-le en pratique :

a. Changez le chemin de to dans APP.vue par ce qui précède

<router-link :to="{name:&#39;hellovue&#39;,params:{username:&#39;tomcat&#39;}}">hellovue页面</router-link>

Copier après la connexion

Ici, nous faisons attention à l'écriture de to, avec un deux-points devant, car il est lié, passez un nom d'utilisateur, la valeur est tomcat

b. Configurez hellovue dans index.js avec le nom hellovue, qui correspond au nom ci-dessus

c. Recevez les paramètres

 <p>传递的名字是：{{$route.params.username}}</p>

Copier après la connexion

dans hellovue.vue et voyez le résultat :

La troisième méthode : utilisez le chemin pour faire correspondre les composants de routage, utilisez l'url pour transmettre les paramètres

et transmettez les paramètres sous forme de deux-points dans le fichier de routage. Il s'agit de la liaison des paramètres <.>

a. Modifiez le chemin dans index.js. Ici, nous modifions le composant myjob.vue

b. >

c. Afficher le contenu que nous souhaitons afficher dans le composant myjob.vue (réception des paramètres)

d Regardez. aux résultats

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!