Was bedeutet dynamisches Vue-Routing?

In Vue besteht dynamisches Routing darin, Routen, die einem bestimmten Muster entsprechen, derselben Komponente zuzuordnen. Das Wesentliche beim dynamischen Routing ist die Weitergabe von Parametern über URLs: „Params“ und „Query“-Parameter.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was bedeutet dynamisches Routing von Vue?

Dynamisches Routing verstehen

Dynamisches Routing besteht darin, Routen, die einem bestimmten Muster entsprechen, derselben Komponente zuzuordnen. Tatsächlich besteht das Wesentliche darin, Parameter über die URL zu übergeben. Zum Beispiel: Als Komponente von Waren müssen wir dieser Komponente verschiedene Produkt-IDs zuordnen. Zu diesem Zeitpunkt müssen wir dynamisches Routing verwenden.

Konfiguration des dynamischen Routings

Sie können dynamische Parameter auf zwei Arten übergeben:

(1), Parameter

(2), Abfrage

Hinweis: Die folgenden Codedemonstrationen finden alle im Verlaufsroutingmodus statt.

Übergabe von Parametern im Params-Modus

So konfigurieren Sie das Routing: Doppelpunkt verwenden: Dynamische Parameter binden.

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

Bei Routing-Sprüngen ist es unterteilt in:

(1) Verwenden Sie die Router-Link-Methode, um den Routensprung zu implementieren

Bei dieser Methode können Sie eine Zeichenfolge verwenden und dem entsprechenden Wert direkt nach dem Pfad folgen, z. B.:

Zweitens können Sie die Objektmethode verwenden, z. B.:

Hinweis: In der

params-Methode verwendet das to-Attribut die Objektmethode, und die Route muss durch das Namensattribut eingeführt werden, und der Pfad kann nicht sein gebraucht.

• Bei der Übergabe von Parametern in der params-Methode muss der Attributname beim Konfigurieren des Routings mit dem Namen des dynamischen Parameters übereinstimmen, andernfalls wird ein Fehler gemeldet.
(2) Verwenden Sie $router, um Routen zu überspringen
• 
  

  //方法1
   this.$router.push('/goods/' + this.goodsId)
   //方法2
   this.$router.push({
     name: 'goods',
     params: {
       id: this.goodsId   }})

params-Methode, die entsprechende URL-Adresse nach der Übergabe von Parametern lautet wie folgt:

Methode zum Abrufen von Parametern: $router.params, Wenn Sie beispielsweise Folgendes erhalten möchten Der Wert der ID in diesem Beispiel lautet, der entsprechende Code lautet:

$route.params.id

Übergabe von Parametern im Abfragemodus

Wenn Sie das Routing konfigurieren, konfigurieren Sie es einfach normal, dh so, wie Sie das Routing ursprünglich konfiguriert haben, können Sie es jetzt noch konfigurieren. Zum Beispiel:

const routes = [{
    path: '/goods',
    name: 'goods',
    component: Goods}]

Bei Routing-Sprüngen ist es unterteilt in:

(1) Verwenden Sie die Router-Link-Methode, um Routensprünge zu implementieren.

Abfrageparameter können nur über Objekte und nicht über Zeichenfolgen übergeben werden.

<router-link>商品</router-link>

(2) Verwenden Sie $ Router-Methode für Routensprung

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

Abfragemethode zum Übergeben von Parametern. Die entsprechende URL-Adresse nach dem Übergeben von Parametern wird angezeigt als:

Hinweis: Abfragemethode zum Übergeben von Parametern, der Attributname im Abfrageobjekt (wie in diesem Beispiel die ID). ) kann beliebig benannt werden, anders als bei der Übergabe von Parametern in der params-Methode, die eingeschränkt ist. Gleichzeitig können Routen auf diese Weise entweder über das Pfadattribut oder das Namensattribut eingeführt werden.
So erhalten Sie Parameter:
$route.query. Wenn Sie beispielsweise den ID-Wert in diesem Beispiel erhalten möchten, lautet der Code:

$route.query.id

Kurz gesagt, achten Sie unbedingt auf: (1). Parameter-Routing kann nur mit Namen eingeführt werden. Abfragemodus-Routing kann mit Namen und Pfad eingeführt werden.

(2). Verwenden Sie „Router“, um Routen zu überspringen. Verwenden Sie „Route“, um Parameter zu erhalten

Das obige ist der detaillierte Inhalt vonWas bedeutet dynamisches Vue-Routing?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!