Heim > Web-Frontend > View.js > Hauptteil

So springen Sie zur Seite in vue.js

王林
Freigeben: 2021-10-08 13:53:22
Original
5377 Leute haben es durchsucht

So springen Sie zu einer Seite in vue.js: 1. Legen Sie drei Schaltflächen für Zurück, Vorwärts und Springen zu einer beliebigen Seite im DOM fest. 2. Betätigen Sie die drei Schaltflächen für Zurück, Vorwärts und Springen zu einer beliebigen Seite im DOM Konstruktor-Schaltfläche, schreiben Sie einfach die Methode in Methoden.

So springen Sie zur Seite in vue.js

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.5.2, Thinkpad T480-Computer.

Wenn wir in Vue zu einer Seite springen, verwenden wir normalerweise das Tag , aber wir können DOM-Elemente nicht direkt im Konstruktor bearbeiten. Wie sollten wir in diesem Fall zu der Seite springen? über das Drehen?

Mal sehen, wie es zusammen klappt!

Schritt 1:

Wir richten zunächst drei Schaltflächen im DOM ein, nämlich „Zurück“, „Vorwärts“ und „Zu einer beliebigen Seite springen“.

<button @click="goback">后退</button>
<button @click="forwards">前进</button>
<button @click="goto">跳转任一页</button>
Nach dem Login kopieren

Der nächste Schritt besteht darin, sie im Konstruktor zu manipulieren

Wenn die Schaltfläche „Zurück“ ausgewählt wird, springt die Seite zur vorherigen Seite

Wenn die Schaltfläche „Vorwärts“ ausgewählt wird, springt die Seite zur nächsten Seite

Wenn die Schaltfläche „Zu einer beliebigen Seite springen“ ausgewählt ist, springt die Seite zu „Zu einer beliebigen Seite springen“

Mit Ausnahme des letzten „Zu einer beliebigen Seite springen“ müssen die beiden anderen Schaltflächen historische Spuren aufweisen, bevor sie springen können

Die Methode ist natürlich in Methoden zu schreiben:

methods: {
     goback() {
       this.$router.go(-1)
     },
     forwards() {
       this.$router.go(1)
     },
     goto() {
       this.$router.push("/about")
     }
}
Nach dem Login kopieren

Empfohlenes Lernen: php-Training

Das obige ist der detaillierte Inhalt vonSo springen Sie zur Seite in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage