Implementierung der Parametersprungfunktion im Vue-Projekt

Seitenbeschreibung:

​ Hauptseite: Name —> shishengzuotanhuichaxun

Die Daten in der Tabelle auf dieser Seite werden vom Backend über das Schnittstellen-Array-Objekt abgerufen und gerendert. Jede Datenzeile hat eine entsprechende Zeilen-ID. Unser Ziel ist es, entsprechend der unterschiedlichen Zeilen-IDs jeder Datenzeile in der Tabelle zur entsprechenden Unterdetailseite zu springen.

Unterseite (Detailseite): Name —> Cinfo

Diese Seite ist die Seite, die durch Aufrufen der entsprechenden Schnittstelle nach dem Abrufen der Zeilen-ID gerendert werden soll.

Projekteinführung und Gründe für die Verwendung von Parametersprüngen:

Dieses System verwendet Vue zum Erstellen des Projektframeworks und nutzt die Komponentenbibliothek des mobilen Vant-Frameworks für die Entwicklung. Die Tabelle auf der Hauptseite wird mit den reinen nativen HTML-Codes th, tr und td implementiert. Die Vue-Direktive v-for wird verwendet, um tr zu durchlaufen und Daten in die Tabelle zu rendern. Daher sind alle Detailschaltflächen, die den gerenderten Tabellendaten entsprechen, gleich, und auch die Seite nach dem Klicken ist gleich, was den Geschäftsanforderungen des Projekts widerspricht. Daher ist die Implementierung der Parameterübergabe besonders kritisch. Das Prinzip der Parameterübergabe besteht darin, dieselbe Vorlage (Cinfo) zu verwenden, aber aufgrund unterschiedlicher URL-Pfade können sich die Inhalte der einzelnen Unterseiten nicht gegenseitig beeinflussen.

Implementierungsprozess:

Schritt 1:

Ändern Sie in der JS-Datei unter Vue-Router die Route der Unterdetailseite wie folgt:

Fügen Sie dem Pfadattribut ' /:id ' hinzu und fügen Sie ein neues Namensattribut hinzu, um die ID nach der URL hinzuzufügen, wenn Sie auf verschiedene Unterdetailseiten umleiten

Schritt 2:

Fügen Sie auf der Hauptseite Parameter zum Bindungsereignis der Detailschaltfläche hinzu und verwenden Sie das Element in v-for, d. h. das über die Schnittstelle erhaltene Array-Objekt, als formalen Parameter in der Klickereignismethode.

Beachten:
1.@click=detail( item ), vergessen Sie nicht, den Item-Parameter in die Klammern einzufügen, wenn Sie ein Klickereignis an eine Schaltfläche binden!

2. Der Schlüsselwert des Pfads in der push()-Methode verwendet hier die ES6-Syntax –> Vorlagenzeichenfolge (Zeichenfolgenliterale, die eingebettete Ausdrücke zulassen).

An dieser Stelle wird die Zeilen-ID nach dem Klicken auf die Schaltfläche „Details“ als Parameter an die Unterdetailseite übergeben, wie unten gezeigt:

Schritt 3:

Als Nächstes müssen wir die von der Hauptseite an die Unterdetailseite übergebene ID abrufen, sie als Anforderungsparameter verwenden, um die Schnittstelle aufzurufen und die Daten zu rendern.

​ Der Vorgang zum Abrufen der übergebenen ID ist wie folgt:

​ Feste Schreibmethode, fragen Sie nicht, ich weiß einfach nicht, wie ich es schreiben soll (holen Sie sich Hilfe von den Experten!). . .

Bisher haben wir die meisten Operationen der Parametersprungfunktion implementiert. Die verbleibenden Operationen des Aufrufs der Schnittstelle per ID auf der Unterseite und des Renderns der Daten werden nicht angezeigt.

Zusammenfassen:

Es gibt viele Methoden. Diese Methode kann nur mit einem bestimmten Parameter springen und kann nicht das gesamte Array oder Objekt übergeben. Wenn Sie eine bessere Methode haben, teilen Sie sie uns bitte mit. Die gesamten Implementierungsschritte für Sprünge mit Parametern sind nicht schwierig. Hauptsache, es geht um die Idee. Aufgrund meiner eigenen mangelnden Fähigkeiten ist dieser Bericht möglicherweise nicht so genau und detailliert. Wenn die Beschreibung aller Schritte Fehler, Unangemessenheiten oder Unklarheiten enthält, weisen Sie mich bitte auf meine Fehler hin. Vielen Dank! Lassen Sie uns zusammenarbeiten und gemeinsam Fortschritte machen!

Dies ist das Ende dieses Artikels über die Implementierung der Parametersprungfunktion im Vue-Projekt. Weitere relevante Inhalte zum Vue-Parametersprung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!