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
Detaillierte Erläuterung des Fehlerproblems beim Festlegen des Standardwerts 0000-00-00 in den Datums- und Datums-/Uhrzeittypen der MySQL-Datenbank
Phänomen: Nach MySQL Version 5.7 ist der Standard...
Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue
Inhaltsverzeichnis 1. Berechnete Eigenschaften Sy...
So erstellen (CREATE PROCEDURE) und rufen (CALL) Sie eine gespeicherte MySQL-Prozedur auf und so erstellen (DECLARE) und weisen (SET) Sie eine Variable zu
Dieser Artikel beschreibt anhand von Beispielen, ...
Vue implementiert das digitale Tausendertrennzeichenformat global
In diesem Artikelbeispiel wird der spezifische Co...
Vue implementiert eine gleitende Navigation oben links und rechts
Navigation und andere Dinge werden bei der täglic...
Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)
Das Wirkungsdiagramm sieht wie folgt aus: <!DO...
Zwei Möglichkeiten zum Verwalten von Volumes in Docker
Im vorherigen Artikel habe ich die Grundkenntniss...
Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router
vue-router hat zwei Modi Hash-Modus Verlaufsmodus...
Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung
Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...
So verwenden Sie den VIM-Editor unter Linux
Als leistungsstarker Editor mit umfangreichen Opt...
VMware implementiert den detaillierten Prozess der unbeaufsichtigten PXE+Kickstart-Installation des Centos7-Systems
Inhaltsverzeichnis PXE implementiert die unbeaufs...
HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)
Im neuesten HTML-Standard gibt es einen Calc-CSS-A...
So stellen Sie MySQL 5.7- und 8.0-Master-Slave-Cluster mit Docker bereit
> MySQL 5.7 Cluster Master und Slave bereitste...
Das Submit-Ereignis des Formulars reagiert nicht
1. Problembeschreibung <br />Wenn JS verwen...
JS-Objektkonstruktor Object.freeze
Inhaltsverzeichnis Überblick Beispiel 1) Objekt e...