Drei grundlegende Modi zum Übergeben von Parametern beim Vue-Routing (ausführliches Tutorial)

In diesem Artikel werden hauptsächlich die drei grundlegenden Parameterübergabemodi im Vue-Routing vorgestellt. Interessierte Freunde können darauf verweisen.

Routing ist die Brücke, die verschiedene Seiten verbindet Sie spielen dabei in gewisser Weise eine äußerst wichtige Rolle und entscheiden darüber, ob die beiden Brücken erfolgreich verbunden werden können.

Beim Vue-Routing werden 3 Parameterübertragungsmethoden unterstützt.

Klicken Sie im Szenario auf das li-Element der übergeordneten Komponente, um zur untergeordneten Komponente zu springen, und übertragen Sie Parameter, damit die untergeordnete Komponente die entsprechenden li-Daten abrufen und den entsprechenden korrekten Inhalt anzeigen kann.

In der übergeordneten Komponente:

<li v-for="article in articles" @click="getDescribe(article.id)">

Option eins:

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

// 方案一，需要对应路由配置如下：
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

Option zwei:

// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

Option 3:

// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置：
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Informationen dazu, wie element-ui die rollierende Lademethode in der Tabelle in Vue implementiert

Informationen zur Leistungsoptimierung von React-Komponenten Ausführliche Erklärung

Wie man mit Vue Bilder zuschneidet und gleichzeitig Funktionen vergrößert, verkleinert und dreht (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDrei grundlegende Modi zum Übergeben von Parametern beim Vue-Routing (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!