So verwenden Sie Vue, um am Router teilzunehmen

Dieses Mal zeige ich Ihnen, wie Sie den Vue-Pass-Router verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des Vue-Pass-Routers gelten. Hier sind tatsächliche Fälle, werfen wir einen Blick darauf.

Vue-Parameterübergabemethode 1

1, Routing-Konfiguration

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2, Verwendungsmethode

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3. Methode zum Abrufen (auf der Beschreibungsseite)

$route.params.id

Verwenden Sie die obige Methode, um den von der vorherigen Seite übergebenen ID-Wert abzurufen

Vue-Parameterübergabemethode zwei

1. Routing-Konfiguration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

2. Verwendungsmethode

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

In der übergeordneten Komponente: Bestimmen Sie die passende Route über den Namen im Routing-Attribut, und Parameter übergeben, um Parameter zu übergeben.

3. Methode zum Abrufen (auf der Beschreibungsseite)

$route.params.id

kann auch mit Parametern erhalten werden;

Vue-Parameterübergabemethode drei

1. Routing-Konfiguration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(Standardkonfiguration)

2. Verwendungsmethode

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

3. Beschaffungsmethode (auf der Beschreibungsseite). )

$route.query.id

(Der Unterschied zwischen der Verwendung einer Abfrage hier zum Abrufen der ID und der vorherigen Parametererfassung besteht darin, dass der mit der Abfrage erhaltene ID-Wert in der URL angezeigt wird und Sie den von Ihnen übergebenen Wert sehen können.)

Props-Wertübertragungsmethode

Übergeordnete Komponente

(Tabellendaten können beiläufig benannt werden, kein spezifischer Wert)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

Unterkomponente

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

prop ist eine einseitige Bindung und props sollten nicht innerhalb der Unterkomponente geändert werden. Allerdings ändert sich der von den Requisiten hier übergebene Wert, wenn sich der Wert der übergeordneten Komponente ändert, was eine dynamische Änderung darstellt.

Tipps zur Verwendung von $route

1, $route.path

Typ: Zeichenfolge

String , der dem Pfad der aktuellen Route entspricht, wird immer in einen absoluten Pfad aufgelöst, z. B. „/foo/bar“.

2, $route.params

Typ: Objekt

　Ein Schlüssel-/Wertobjekt, einschließlich dynamischer Fragmente und vollständig übereinstimmender Fragmente, wenn keine Routing-Parameter vorhanden sind ist ein leeres Objekt.

3, $route.query

Typ: Objekt

Ein Schlüssel/Wert-Objekt, das URL-Abfrageparameter darstellt. Zum Beispiel für den Pfad /foo?user=1, $route.query.user == 1 oder ein leeres Objekt, wenn keine Abfrageparameter vorhanden sind.

4, $route.hash

Typ: Zeichenfolge

Der Hashwert der aktuellen Route (mit #), wenn kein Hashwert vorhanden ist, ist er leer Zeichenfolge.

5, $route.fullPath

Typ: Zeichenfolge

Die URL nach Abschluss der Analyse, einschließlich des vollständigen Pfads der Abfrageparameter und des Hashs.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So lösen Sie schnell die Übertragung verstümmelter chinesischer Parameter bei der Übertragung von jQuery-Anfragen

So verwenden Sie PHP, um Formulare zu verhindern Vervielfältigung einreichen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um am Router teilzunehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!