Detaillierte Erläuterung der 8 Möglichkeiten zum Übergeben von Parametern in Vue-Routing-Komponenten

Wenn wir eine Single-Page-Anwendung entwickeln, müssen wir manchmal eine bestimmte Route eingeben und Daten basierend auf Parametern vom Server abrufen. Dann müssen wir zuerst die von der Route übergebenen Parameter abrufen, um die Serveranforderung abzuschließen. Daher müssen wir mehrere Möglichkeiten verstehen, Parameter über die Route zu übergeben. Die folgenden Methoden sind dieselben wie bei vue-router@4 .

Programmatische Routing-Parameter

Zusätzlich zur Verwendung <router-link> zum Erstellen eines Tags zum Definieren von Navigationslinks können wir auch die Instanzmethode des Routers verwenden, um es durch Schreiben von Code zu implementieren.

1. Parameter weitergeben

Routing-Konfiguration

Pfadparameter werden durch einen Doppelpunkt :

const Routen = [
 // Dynamische Abschnitte beginnen mit einem Doppelpunkt { path: 'details/:id', name: "details", component: Details },
]

Der Parameter router.push() kann ein Stringpfad oder ein Objekt sein, das die Adresse beschreibt.

const Home = {
 Vorlage: '<div @click="toDetails">Zu Details</div>',
 Methoden:
  zuDetails() {
   // String-Pfad this.$router.push('/details/001')
   // Objekt mit Pfad this.$router.push({path: '/details/001'})
   // Benennen Sie die Route. Beim Konfigurieren der Route ist das Namensfeld erforderlich this.$router.push({ name: 'details', params: { id: '001' } })
  }
 }
}

Beachten Sie, dass params ignoriert werden, wenn path angegeben ist:

// `params` kann nicht mit `path` verwendet werden router.push({ path: '/details', params: { id: '001' } }) // -> /details

Komponenten erhalten Daten

Wenn eine Route übereinstimmt, wird der Wert ihrer Parameter in jeder Komponente als this.$route.params angezeigt.

const Details = {
 Vorlage: '<div>Details {{ $route.params.id }} </div>',
 erstellt() {
  // Auf Routenänderungen warten this.$watch(
   () => diese.$route.params,
   (zuParams, vorherigeParams) => {
    // Auf Routenänderungen reagieren...
   }
  )
 },
}

2. Abfrage durchgehen

In diesem Fall werden die von query übergebenen Parameter nach der URL angezeigt, beispielsweise: /details/001?kind=car .

Routing-Konfiguration

Bei Verwendung von query sind die folgenden drei Methoden möglich:

dies.$router.push('/details/001?kind=car')
this.$router.push({ Pfad: '/details/001', Abfrage: { Art: "Auto" }})
this.$router.push({ Name: 'details', Parameter: { ID: '001' }, Abfrage: { Art: 'Auto' }})

Komponenten erhalten Daten

Komponenten werden über $route.query bezogen:

const Details = {
 Vorlage: '<div>Details {{ $route.query.kind }} </div>',
 erstellt() {
  // Auf Routenänderungen warten this.$watch(
   () => diese.$route.query,
   (zuParams, vorherigeParams) => {
    // Auf Routenänderungen reagieren...
   }
  )
 },
}

Um auf Parameteränderungen innerhalb derselben Komponente zu reagieren, können Sie einfach eine beliebige Eigenschaft des $route Objekts beobachten, in diesem Fall $route.query .

3. Weitergabe per Hash

Auf diese Weise enthält der URL-Pfad hash , zum Beispiel: /details/001#car .

Routing-Konfiguration

Bei Verwendung von hash sind die folgenden drei Methoden möglich (identisch mit query ):

dies.$router.push('/details/001#car')
dies.$router.push({ Pfad: '/details/001', Hash: '#car'})
dies.$router.push({ Name: 'details', Parameter: { ID: '001' }, Hash: 'Auto'})

Komponenten erhalten Daten

Die Komponente wird über $route.hash.slice(1) bezogen:

const Details = {
 Vorlage: '<div>Details {{ $route.hash.slice(1) }} </div>',
}

Übergabe über Requisiten

Die Verwendung von $route in einer Komponente ist eng an den Router gekoppelt, was die Flexibilität der Komponente einschränkt, da sie nur für eine bestimmte URL verwendet werden kann. Obwohl dies nicht unbedingt eine schlechte Sache ist, können wir dieses Verhalten über die props überschreiben.

Verwenden Sie props , um Parameter entkoppelt zu übergeben, hauptsächlich bei der Routenkonfiguration.

1. Boolescher Modus

Wenn props auf true gesetzt ist, werden route.params als „props“ der Komponente gesetzt.

Der folgende Code ruft beispielsweise die dynamische Feld id über $route ab:

const Benutzer = {
 Vorlage: '<div>Benutzer {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: Benutzer }]

Ersetzen Sie den obigen Code durch props wie folgt:

const Benutzer = {
 props: ['id'], // ID über Props in der Komponente abrufen
 Vorlage: '<div>Benutzer {{ id }}</div>'
}
// Fügen Sie in der Routing-Konfiguration das Feld „props“ hinzu und setzen Sie den Wert auf „true“
const routes = [{ path: '/user/:id', component: Benutzer, props: true }]

Hinweis: Für Routen mit benannten Ansichten müssen Sie für jede benannte Ansicht props -Konfiguration definieren:

const Routen = [
 {
  Pfad: '/user/:id',
  Komponenten: { Standard: Benutzer, Seitenleiste: Seitenleiste },
  // Requisiten für den Benutzer bereitstellen
  Requisiten: { Standard: true, Seitenleiste: false }
 }
]

2. Objektmodus

Wenn es sich props um ein Objekt handelt, werden sie unverändert als Komponenten-Requisiten festgelegt. Nützlich, wenn die Requisiten statisch sind.

Routing-Konfiguration

const Routen = [
 {
  Pfad: '/hallo',
  Komponente: Hallo,
  Requisiten: { Name: 'Welt' }
 }
]

Daten in Komponente abrufen

const Hallo = {
 Requisiten: {
  Name: {
   Typ: Zeichenfolge,
   Standard: „Vue“
  }
 },
 Vorlage: '<div> Hallo {{ name }}</div>'
}

Die Komponente <Hello /> zeigt standardmäßig Hello Vue an, aber die Route ist mit einem props -Objekt konfiguriert. Wenn die Route zu /hello springt, wird der übergebene name angezeigt und auf der Seite wird Hello World angezeigt.

3. Funktionsmodus

Sie können eine Funktion erstellen, die Props zurückgibt. Dadurch können Sie Parameter in andere Typen konvertieren, statische Werte mit routenbasierten Werten kombinieren und vieles mehr.

Routing-Konfiguration

Wenn Sie den Funktionsmodus verwenden, erhält die Funktion, die Props zurückgibt, route Routendatensatz als Parameter.

// Erstellen Sie eine Funktion, die Props zurückgibt const dynamicPropsFn = (route) => {
 return { Name: route.query.say + "!" }
}
const Routen = [
 {
  Pfad: '/hallo',
  Komponente: Hallo,
  Requisiten: dynamicPropsFn
 }
]

Komponenten erhalten Daten

Wenn die URL /hello?say=World lautet, wird {name: 'World!'} als Props an die Hello Komponente übergeben.

const Hallo = {
 Requisiten: {
  Name: {
   Typ: Zeichenfolge,
   Standard: „Vue“
  }
 },
 Vorlage: '<div> Hallo {{ name }}</div>'
}

An diesem Punkt wird die Seite gerendert:

Hinweis: Halten Sie die props -Funktion so zustandslos wie möglich, da sie nur bei einer Änderung der Route verwendet wird. Wenn Sie zum Definieren von Eigenschaften einen Status benötigen, verwenden Sie eine Wrapper-Komponente, damit Vue auf Statusänderungen reagieren kann.

Andere Wege

1. Durch Vuex gehen

1. Speicherstatus speichern;
2. Komponente A ändert den Status im Store;
3. Komponente B wird im Handel bezogen.

2. Durch lokalen Front-End-Speicher und andere Methoden

1. Lokaler Speicher;
2. Sitzungsspeicherung;
3. IndexierteDB;
4. Web-SQL;
5. Kekse.

Damit ist dieser Artikel über 8 Möglichkeiten zum Übergeben von Parametern in Vue-Routingkomponenten abgeschlossen. Weitere Informationen zum Übergeben von Parametern in Vue-Routingkomponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!