Zwei Implementierungscodes der programmgesteuerten Navigation mit Vue-Router
Zwei Möglichkeiten zum Navigieren auf der Seite Deklarative Navigation: Die Art und Weise, wie durch Klicken auf einen Link eine Navigation erreicht wird, wird als deklarative Navigation bezeichnet, beispielsweise: der Link Grundlegende Verwendung der programmgesteuerten NavigationHäufig verwendete APIs für die programmgesteuerte Navigation sind die folgenden:
const Benutzer = {
Vorlage: '<div><button @click="goRegister">Zur Registrierungsseite springen</button></div>',
Methoden: {
geheRegistrieren: function(){
// Routenumleitung programmgesteuert steuern this.$router.push('/register');
}
}
}Konkrete Umsetzung:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<meta http-equiv="X-UA-kompatibel" content="ie=edge" />
<title>Dokument</title>
<!-- Vue-Datei importieren-->
<!-- <script src="./lib/vue_2.5.22.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</Kopf>
<Text>
<!-- Von der VM-Instanz kontrollierter Bereich-->
<div id="app">
<router-link to="/user/1">Benutzer1</router-link>
<router-link to="/user/2">Benutzer2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">Benutzer3</router-link>
<router-link to="/register">Registrieren</router-link>
<!-- Routenplatzhalter -->
<Router-Ansicht></Router-Ansicht>
</div>
<Skript>
const Benutzer = {
Requisiten: ['id', 'uname', 'alter'],
Vorlage: `<div>
<h1>Benutzerkomponente -- Benutzer-ID: {{id}} -- Name: {{uname}} -- Alter: {{age}}</h1>
<button @click="goRegister">Zur Registrierungsseite gehen</button>
</div>`,
Methoden: {
geheRegistrieren() {
this.$router.push('/register') //Programmatische Navigation}
},
}
const Register = {
Vorlage: `<div>
<h1>Komponente registrieren</h1>
<button @click="goBack">Zurück</button>
</div>`,
Methoden: {
geh zurück() {
dies.$router.go(-1)
}
}
}
// Ein Routing-Instanzobjekt erstellen const router = new VueRouter({
// Alle Routingregeln Routen: [
{ Pfad: '/', Umleitung: '/Benutzer' },
{
// Benannter Routenname: 'Benutzer',
Pfad: '/user/:id',
Komponente: Benutzer,
Requisiten: Route => ({ uname: 'zs', Alter: 20, ID: route.params.id })
},
{ Pfad: '/register', Komponente: Registrieren }
]
})
// VM-Instanzobjekt erstellen const vm = new Vue({
//Geben Sie den kontrollierten Bereich an el: '#app',
Daten: {},
// Mounten Sie das Router-Instanzobjekt// router: router
Router
})
</Skript>
</body>
</html>Parameterregeln für die Methode router.push()
// Zeichenfolge (Pfadname)
router.push('/home')
// Objekt router.push({ Pfad: '/home' })
// Benannte Routen (Parameterübergabe)
router.push({ Name: '/Benutzer', Parameter: { Benutzer-ID: 123 }})
// Mit Abfrageparametern wird daraus /register?uname=lisi
router.push({ Pfad: '/register', Abfrage: { uname: 'lisi' }})Dies ist das Ende dieses Artikels über den Implementierungscode der programmgesteuerten Navigation des Vue-Routers. Weitere relevante Inhalte zur programmgesteuerten Navigation des Vue-Routers 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! Das könnte Sie auch interessieren:
|
<<: Zusammenfassung gängiger Befehle in Dockerfile
>>: Tutorial zur Installation von MySQL 5.7.18 unter Windows 10
![Detaillierte Schritte zum Installieren und Debuggen einer MySQL-Datenbank unter CentOS7 [Beispiel]](/upload/images/67cae1df5f772.webp)
Artikel empfehlen
Reines CSS für eine coole Ladeanimation
Schauen wir uns an, welche Ladeanimationseffekte ...
SQL-Implementierung von LeetCode (182. Doppelte Postfächer)
[LeetCode] 182.Doppelte E-Mails Schreiben Sie ein...
Detaillierte Erklärung wichtiger Kaskadierungskonzepte in CSS
Kürzlich stieß ich im Verlauf des Projekts auf ei...
So verwenden Sie Nginx als Proxy-Cache
Der Zweck der Cache-Verwendung besteht darin, den...
HTML-Code einer Webseite: Erzeugung von Lauftext
In diesem Abschnitt beschreibt der Autor die spez...
Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite
Ein Problem, auf das Frontend-Entwickler häufig s...
Einfache Implementierungsmethode der bidirektionalen Datenbindung im JS-Projekt
Inhaltsverzeichnis Vorwort Publish-Subscriber-Mus...
Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript
Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...
Detaillierte Erläuterung der MySQL-Cursor-Konzepte und -Verwendung
Dieser Artikel erläutert anhand von Beispielen da...
Docker-Overlay realisiert die Container-Kommunikation zwischen Hosts
Inhaltsverzeichnis 1. Docker-Konfiguration 2. Ers...
Spezielle Methode zum Hinzufügen von Fremdschlüsseleinschränkungen in MySQL
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Tutorial zur Installation von lamp-php7.0 in einer Centos7.4-Umgebung
Dieser Artikel beschreibt, wie lamp-php7.0 in ein...
Codebeispiel für die Linux-SSH-Serverkonfiguration
Verwenden Sie den folgenden Terminalbefehl, um de...
Lösung für den Fehler der Remoteverbindung zur MySQL-Datenbank in der Linux-Konfiguration
Heute habe ich eine Frage zur Konfiguration einer...
Beispiel für das Hinzufügen einer Mehrsprachenfunktion zur Vue-Hintergrundverwaltung
Inhaltsverzeichnis 1. Konfigurieren Sie zunächst ...