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
Artikel empfehlen
So stellen Sie das umfassende Benutzererlebnis sicher
Verwandte Artikel: Website-Design für Benutzererfa...
Ähnlich wie HTML-Tags: strong und em, q, cite, blockquote
Es gibt einige Tags in XHTML, die ähnliche Funkti...
JavaScript zum Filtern von Arrays
In diesem Artikelbeispiel wird der spezifische Co...
Ubuntu 20.04 stellt eine Verbindung zu WLAN her (2 Methoden)
Ich habe vor Kurzem Ubuntu 20.04 installiert und ...
Beispiel für die Konvertierung von Webpack-Bildern in Base64
URL-Loader herunterladen yarn add -D URL-Lader Mo...
Einführung in die JWT-Verifizierung mit Nginx und Lua
Inhaltsverzeichnis Vorwort Lua-Skript nignx.conf-...
Detaillierte Erläuterung des grundlegenden Implementierungsprinzips von MySQL DISTINCT
Vorwort DISTINCT ist tatsächlich der Implementier...
Grafisches Tutorial zur Installation und Verwendung von MySQL 5.7.17
MySQL ist ein relationales Datenbankverwaltungssy...
Was bedeutet this.parentNode.parentNode (übergeordneter Knoten des übergeordneten Knotens)?
Der übergeordnete Knoten des übergeordneten Knoten...
Einfache Implementierung von Mysql-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen
Einfache Implementierung von Mysql-Anweisungen zu...
Detaillierte Erläuterung der Einführung in die JavaScript-Funktion
Inhaltsverzeichnis Funktionseinführung Funktion E...
Die vollständige Verwendung von Setup, Ref und Reactive in der Vue3-Kombinations-API
1. Erste Schritte mit setUp Stellen Sie kurz die ...
Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern
Ergebnis:Implementierungscode html <ul Klasse=...
Zusammenfassung der Docker-Datenspeicherung
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Der Nginx-Reverseproxy leitet Anfragen von Port 80 an 8080 weiter.
Lassen Sie uns zunächst eine Reihe von Konzepten ...