Welche verschiedenen Möglichkeiten gibt es, Werte beim Vue-Routing zu übergeben?

Vue-Routenwertübertragungsmethode: 1. Verwenden Sie zum Übertragen die Routennavigation „$router.push“. 3. Passen Sie die Route über den Namen im Routenattribut an , und übergeben Sie es dann entsprechend dem Namen im Routenattribut. Übergeben Sie Parameterwerte 4. Übergeben Sie Parameterwerte durch Abfrage.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue-Routing-Methode zur Übergabe von Parameterwerten

1. Router-Link-Routennavigation

Übergeordnete Komponente: Verwenden Sie <router-link to = "/jump path/incomingparameter"> </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

Zum Beispiel: <router-link to="/a/123">routerlink-Übergabeparameter</router-link>

Unterkomponente:

this.$route.params.num empfängt die von der übergeordneten Komponente übergebenen Parameter🎜rrreee🎜🎜Routenkonfiguration:🎜:{Pfad: '/a/:num', Name: A, Komponente: A} 🎜🎜🎜Anzeige in der Adressleiste:🎜：http://localhost:8080/#/a/123🎜🎜🎜🎜 2. Rufen Sie $router.push auf, um den Routenparameter zu implementieren übergeben🎜🎜🎜🎜🎜Übergeordnete Komponente:🎜 Klickereignis binden und Sprungcode schreiben🎜rrreee🎜🎜Unterkomponente:🎜 this.$route.params.id empfängt die von der übergeordneten Komponente übergebenen Parameter🎜rrreee🎜🎜Routenkonfiguration:🎜： {Pfad: '/d/:id', Name: D, Komponente: D🎜🎜🎜Anzeige in der Adressleiste:🎜：http://localhost:8080 /#/ d/123🎜🎜🎜🎜3. Passen Sie die Route anhand des Namens im Routenattribut an und übergeben Sie dann die Parameter entsprechend den Parametern🎜🎜🎜🎜🎜Übergeordnete Komponente:🎜 Passen Sie den durch die Route konfigurierten Attributnamen an🎜 rrreee🎜🎜 Unterkomponente:🎜🎜rrreee🎜🎜Routing-Konfiguration:🎜 Es ist nicht erforderlich, eingehende Parameter nach dem Pfad hinzuzufügen, aber der Name muss mit dem Namen in der übergeordneten Komponente übereinstimmen
{path: ' /b“, Name: „B“, Komponente: B gehen verloren, nachdem die Seite erneut aktualisiert wurde 🎜<br><code>http://localhost:8080/#/b🎜🎜🎜🎜4. Parameter über die Abfrage übergeben🎜🎜🎜🎜🎜Übergeordnete Komponente:🎜🎜 rrreee🎜🎜Untergeordnete Komponente:🎜🎜rrreee 🎜🎜Routing-Konfiguration:🎜 Keine Änderung erforderlich
{Pfad: '/c', Name: 'C', Komponente: C}🎜🎜 🎜Anzeige in der Adressleiste:🎜 (Chinesisch transkodiert)
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0% 8F%E7%BE %8A%E5%90%8C%E5%AD%A6🎜🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWelche verschiedenen Möglichkeiten gibt es, Werte beim Vue-Routing zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!