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
Was bedeutet es, nach der CSS-Linkadresse ein Fragezeichen (?) hinzuzufügen?
Zum Beispiel: <link rel="stylesheet" ...
So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server
Inhaltsverzeichnis Hintergrund erreichen Ergänzun...
So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen
1. Öffnen Sie Port 2375 Bearbeiten Sie docker.ser...
Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten
Inhaltsverzeichnis Grundlegende Beschreibung AST-...
Typescript+React zum Erzielen einfacher Drag-and-Drop-Effekte auf Mobilgeräten und PCs
In diesem Artikel wird der spezifische Code von T...
Testen des Hyperlink-Öffnungsziels
Das Zielattribut eines Links bestimmt, wohin der L...
So zeigen Sie Serverhardwareinformationen in Linux an
Hallo zusammen, heute ist Double 12, habt ihr sch...
Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue
Inhaltsverzeichnis Vorwort: Implementierungsschri...
MySQL implementiert Beispielcode, um doppelte Hinzufügungen beim Hinzufügen eines Einkaufswagens zu verhindern
Vorwort Vor kurzem habe ich aus beruflichen Gründ...
Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1
Designer verfügen über eine eigene Schriftartenbi...
MySQL-Code zur Implementierung der Sequenzfunktion
MySQL implementiert Sequenzfunktion 1. Erstellen ...
Implementierung eines Puzzlespiels mit js
In diesem Artikel wird der spezifische Code von j...
MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10
Super ausführliches Tutorial zur Installation und...
Einführung in HTML DOM_PowerNode Java Academy
Was ist DOM? Mit JavaScript können Sie das gesamt...
Vergleich zwischen Redis und Memcache und Auswahlmöglichkeiten
Ich verwende Redis seit Kurzem und finde es recht...