Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe

Die Funktion, die ich erreichen möchte, besteht darin, ein neues Fenster zu öffnen, um eine neue Seite anzuzeigen. Dabei müssen Parameter übergeben werden, die nicht in der Adressleiste angezeigt werden können. Darüber hinaus können die übergebenen Parameter beim Aktualisieren der Seite nicht verloren gehen und müssen immer vorhanden sein, es sei denn, ich schließe das neue Fenster, d. h. die Browserregisterkarte, manuell.

Beim Programmieren für Baidu habe ich festgestellt, dass der Online-Inhalt diesen Effekt überhaupt nicht erzielen kann und dass es Fallstricke gibt. Es ist offensichtlich unmöglich, dies zu erreichen, aber sie sind so geschrieben, als ob es eine Tatsache wäre. Deshalb habe ich dem Titel absichtlich „Es gibt Bilder und Wahrheit“ hinzugefügt. Ich täusche Sie nicht. Wenn Sie die Funktion nicht erreichen können, versuchen Sie nicht, die Leute zum Narren zu halten.

Ich werde zuerst den von mir erstellten Code aufschreiben und dann die Fallstricke vorstellen, die andere nicht implementieren können, sowie die Dinge, auf die in diesem Zusammenhang geachtet werden muss.

Öffnen Sie ein neues Fenster und geben Sie den Code ein

//Öffne ein neues Fenster und übergebe Parameter. Die Parameter können nicht in der Adressleiste angezeigt werden. Wenn das Fenster nicht geschlossen wird, wird es kontinuierlich aktualisiert. Die Parameter sind immer gültig. handleWindow() {
 //Hauptsächlich die Funktion zum Öffnen eines neuen Fensters realisieren var route = this.$router.resolve({
 Name: "Xterm",
 })
 // Hauptsächlich die Funktion zum Speichern von Parametern implementieren sessionStorage.setItem("ip", "1.1.1.1");
 
 Fenster.öffnen(route.href, '_blank')
}

Meine Routing-Konfiguration ist ebenfalls veröffentlicht.

{
 Pfad: '/xterm',
 versteckt: wahr,
 Komponente: () => import('@/views/monitor/xterm/index'),
 Name: "Xterm",
},

Nun erhält die Seite Parameter

//Vue-Initialisierungsmethode. Sobald die Seite initialisiert ist, wird der Parameter created() { abgerufen.
 Alarm (SessionStorage.getItem("ip"));
 diese.ip = sessionStorage.getItem("ip")
},

Poste ein Wahrheitsbild

Dies geschieht durch das Öffnen eines neuen Fensters über Vue und die Übergabe von Parametern über SessionStorage. Warum kann diese Funktion nur mit dieser Methode erreicht werden? Lassen Sie mich Ihnen von meiner Erfahrung beim Betreten der Grube erzählen. Es gibt böse Menschen unter den Leuten, die gefälschte Codes verwenden, um Leute im Internet zu betrügen. Welcher Programmierer kann einem solchen Test nicht standhalten?

Zunächst einmal erfordert diese Funktion das Öffnen eines neuen Fensters, daher gibt es drei Möglichkeiten, dies zu tun:

Die erste Methode: über das Tag <router-link> . Mir persönlich gefällt die Art und Weise, wie dieses Tag geschrieben wird, nicht. Für einfache Geschäftsszenarien ist es gerade noch in Ordnung, aber ich habe mit vielen Geschäften und vielen Parametern zu tun. Diese Art, Tags zu schreiben, ist der Geschäftserweiterung nicht förderlich. Direkt ausschließen, RAUS!

Die zweite Methode: über router.replace . Diese Methode öffnet das Fenster und ersetzt die aktuelle Seite A durch die Seite B, zu der gesprungen werden soll. Ich öffne das neue Fenster, um neue Dinge zu sehen, aber es lässt meine vorherige Seite direkt verschwinden. Ist das nicht beschissen? Nach meinem Experiment: RAUS!

Die dritte Methode: Über die Methode router.resolve wird ein neues Fenster geöffnet, ohne die aktuelle Seite A zu beeinträchtigen, und direkt eine Browserregisterkarte geöffnet. Ich kann zwischen den Registerkarten hin- und herwechseln, um die Informationsdaten der beiden Seiten anzuzeigen. Das ist schön, das gefällt mir, das ist es.

Übrigens unterstützen router.go und router.push nach vue2.0 nicht mehr das Attribut zum Öffnen eines neuen Fensters, um mit dem immer beliebter werdenden HTML5 konsistent zu bleiben. router.go wird als Vorwärts- und Rückwärtsnavigation verwendet; router.push wird als Wegweiser zu einer speziellen Seite verwendet. Dieser Sprung öffnet kein neues Fenster, verfügt jedoch über eine Verlaufsfunktion. Wenn Sie mehrere Registerkarten in einem Fenster haben, können Sie damit mehrere Registerkarten öffnen, wie in der Abbildung gezeigt.

Okay, mit router.resolve können wir zum neuen Fenster springen. Jetzt beginnen wir mit der Übergabe von Parametern, und hier wird es knifflig. Bei der Online-Übertragung unterscheidet man grundsätzlich zwei Arten der Parameterübermittlung:

//Teste den ersten Parameter testA (aaa) {
 const route = dies.$router.resolve({
   Name: "Xterm", 
   Parameter: {
     IP-Adresse: aaa
   }
 })
 Fenster.öffnen(route.href,'_blank')
}

//Teste den zweiten Parameter testA (bbb) {
 const route = dies.$router.resolve({
   Pfad: '/xterm', 
   Abfrage: {
     IP: bbb
   }
 })
 Fenster.öffnen(route.href,'_blank')
}

Die entsprechenden Empfangsparameter sind wie folgt;

erstellt() {
 //Testen Sie den ersten Zugriffsparameter this.ip = this.$route.params.ip
 //Testen Sie den zweiten Zugriffsparameter this.ip = this.$route.query.ip
},

Das Testergebnis ist, dass der erste Typ den Wert niemals abrufen kann, während der zweite Typ die Werte der übergebenen Parameter in der Adressleiste verfügbar macht. Auch wenn die erste Methode alle möglichen Spezialverarbeitungen durchläuft, ist das beste Ergebnis, den Wert nur beim ersten Mal zu erhalten. Wenn Sie die Seite erneut aktualisieren, geht der Wert verloren. Wie kann das möglich sein? Wer kann garantieren, dass Benutzer nicht das Gefühl haben, nicht weiterzukommen und auf die Schaltfläche „Aktualisieren“ klicken? Es gibt überhaupt kein Problem beim Übergeben von Parametern in router.push . Alle Parameter können empfangen werden. Der Unterschied besteht darin, dass bei der Kombination Name+Parameter die Parameter nicht in der Adressleiste stehen und die Daten nach dem Aktualisieren verschwinden. Bei der Kombination Pfad+Abfrage stehen die Parameter in der Adressleiste und die Werte bleiben dort, egal wie Sie die Seite aktualisieren. Ich schätze, nachdem ich es mit Push versucht hatte, dachte ich natürlich, dass die Lösung dieselbe sein würde. Ich habe viele Blogs gesehen, in denen stand, dass sie keine Parameter über die Adressleiste übergeben, sondern die erste Methode verwenden, und dann haben sie nie Erfolg, aber die Anzahl der Klicks ist immer noch sehr hoch, was mich zum Weinen bringt, aber keine Tränen hat.

Es blieb mir nichts anderes übrig, als es selbst zu tun. Ich suchte nach Cache und fand die Eigenschaften localStorage und sessionStorage. SessionStorage wird verwendet, um Daten vorübergehend zu speichern, die nach dem Schließen des Fensters oder Tabs gelöscht werden; localStorage wird verwendet, um die Daten der gesamten Website dauerhaft zu speichern. Die gespeicherten Daten haben keine Ablaufzeit, bis sie manuell gelöscht werden. SessionStorage reicht offensichtlich aus.

Die Browserversionen, die diese beiden Attribute unterstützen, sind wie folgt:

An diesem Punkt ist das Problem eigentlich gelöst. Tatsächlich ist es nicht kompliziert. Es ist nur so, dass die Antworten im Internet von unterschiedlicher Qualität sind. Ich werde sie aufzeichnen, damit andere sie verwenden können.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Öffnen eines neuen Fensters und das Übergeben von Parametern in Vue. Weitere relevante Inhalte zum Öffnen eines neuen Fensters und Übergeben von Parametern in Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!