Quelles sont les différentes manières de transmettre des valeurs dans le routage Vue ?

Méthode de transfert de valeur d'itinéraire Vue : 1. Utilisez la navigation d'itinéraire « router-link » pour transférer ; 2. Appelez « $router.push » pour réaliser le transfert de valeur de paramètre d'itinéraire 3. Faites correspondre l'itinéraire via le nom dans l'attribut d'itinéraire ; , puis transmettez-le en fonction du nom dans l'attribut route. params transmet les valeurs des paramètres ; 4. Transmettez les valeurs des paramètres via la requête.

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

Méthode de routage Vue pour transmettre les valeurs des paramètres

1. Navigation d'itinéraire par lien de routeur

Composant parent : Utilisez <router-link to = "/jump path/incoming settings"> </router-link><router-link to = "/跳转路径/传入的参数"></router-link>

例如：<router-link to="/a/123">routerlink传参</router-link>

子组件: this.$route.params.num接收父组件传递过来的参数

mounted () {
  this.num = this.$route.params.num
}

路由配置:：{path: '/a/:num', name: A, component: A}

地址栏中的显示:：http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

父组件: 绑定点击事件，编写跳转代码

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

子组件: this.$route.params.id接收父组件传递过来的参数

mounted () {
  this.id = this.$route.params.id
}

路由配置:：{path: '/d/:id', name: D, component: D}

地址栏中的显示:：http://localhost:8080/#/d/123

三、通过路由属性中的name匹配路由，再根据params传递参数

父组件: 匹配路由配置好的属性名

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: &#39;B&#39;,
        params: {
          sometext: &#39;一只羊出没&#39;
        }
      })
    }

子组件:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失
http://localhost:8080/#/b

四、通过query来传递参数

父组件:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: &#39;/c&#39;,
        query: {
          sometext: &#39;这是小羊同学&#39;
        }
      })
    }

子组件:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

路由配置: 不需要做任何修改
{path: '/c', name: 'C', component: C}

地址栏中的显示: (中文做了转码)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

Par exemple : <router-link to="/a/123">routerlink passant le paramètre</router-link>

Sous-composant :

this.$route.params.num reçoit les paramètres passés par le composant parent🎜rrreee🎜🎜Configuration de la route :🎜:{path: '/a/:num', nom : A, composant : A} 🎜🎜🎜Affichage dans la barre d'adresse :🎜：http://localhost:8080/#/a/123🎜🎜🎜🎜 2. Appelez $router.push pour implémenter le paramètre Route passage🎜🎜🎜🎜🎜Composant parent :🎜 Lier l'événement de clic et écrire le code de saut🎜rrreee🎜🎜Sous-composant :🎜 this.$route.params.id reçoit les paramètres transmis par le composant parent🎜rrreee🎜🎜Configuration de la route :🎜： {chemin : '/d/:id', nom : D, composant : D}🎜🎜🎜Affichage dans la barre d'adresse :🎜：http://localhost:8080 /#/ d/123🎜🎜🎜🎜3. Faites correspondre la route via le nom dans l'attribut route, puis transmettez les paramètres en fonction des paramètres🎜🎜🎜🎜🎜Composant parent :🎜 Faites correspondre le nom de l'attribut configuré par la route🎜. rrreee🎜🎜 Sous-composant :🎜🎜rrreee🎜🎜Configuration du routage :🎜 Il n'est pas nécessaire d'ajouter des paramètres entrants après le chemin, mais le nom doit être cohérent avec le nom du composant parent
{path: ' /b', nom : 'B', composant : B}🎜🎜🎜Affichage dans la barre d'adresse : 🎜 On peut voir que la barre d'adresse 🎜 ne contiendra 🎜 aucun paramètre entrant, et les 🎜 paramètres le seront être perdu après avoir actualisé à nouveau la page 🎜
http://localhost:8080/#/b🎜🎜🎜🎜4. Transmettez les paramètres via la requête🎜🎜🎜🎜🎜Composant parent :🎜🎜. rrreee🎜🎜Composant enfant :🎜🎜rrreee 🎜🎜Configuration du routage :🎜 Aucune modification n'est requise
{chemin : '/c', nom : 'C', composant : C}🎜🎜 🎜Affichage dans la barre d'adresse :🎜 (chinois transcodé)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0% 8F%E7%BE %8A%E5%90%8C%E5%AD%A6🎜🎜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!