Einführung in den Vue.js 3 Router

1. Einführung: Hallo, willkommen zu diesem Kurs über den View-Router und insbesondere über das Paket , das mit View-Version drei kompatibel ist , der View-Router-Version vier. Das View Route-Paket ermöglicht es uns im Kern , zwischen Seiten in unseren Anwendungen zu wechseln, aber es steckt auch viel mehr dahinter als nur das. Dies ist ein Einführungskurs, der die meisten wichtigen Themen beinhaltet , die Sie benötigen, um loszulegen. Wir beginnen am Anfang mit der Erstellung eines neuen VGS-Projekts, Version drei, wobei das Routen-Paket die Anforderungen abdeckt , die wir für den Einstieg benötigen Dann behandeln wir den Inhalt, einschließlich der Route der Dateien, was all diese Dateien bedeuten und wo die Routen eingerichtet werden müssen, die es ermöglichen, zwischen diesen Seiten zu wechseln Im Folgenden erfahren Sie, wie Sie die Links einrichten, um zwischen Seiten zu wechseln, und Sie erfahren auch, wie wir die volle Kontrolle darüber haben , wo der Seiteninhalt abgespielt wird. Wir werden lernen, dynamische Seiten-URLs zu erstellen, damit wir Variablen wie den aktuellen Benutzer in unsere Routen einbeziehen können Variablen wie den aktuellen Benutzer in unsere Routen einbeziehen . Arbeit mit Parametern und Abfragezeichenfolgen ist auch wichtig, wenn wir zwischen Seiten wechseln , und das View-Router-Paket bietet uns auch die Möglichkeit, Informationen zwischen Routen zu übertragen, und deckt auch das Extrahieren von Informationen ab, die in Formulareingaben übergeben werden Routing ist nicht immer so einfach wie eine Reihe von Links , die jeder Seite zugeordnet Möglicherweise benötigen wir auch verschachtelte Route zwei, und wir haben auch dafür gesorgt In unseren Beispielen behandeln wir das CSS-Styling, das nicht nur auf unsere Links angewendet wird, sondern auch darauf basiert, ob die aktuelle Route aktiv ist Wir behandeln Fallback-Seiten und wie man Routing innerhalb von Javascript aktiviert . Wer bin ich? Mein Name ist Chris, und ich war schon in jungen Jahren in der Webentwicklung tätig und unterrichte seit über einem Jahrzehnt online und persönlich. Ich verwende GS und die Route in meinen eigenen Projekten. Ich habe Erfahrung aus erster Hand, obwohl ViewGS-Kenntnisse nicht unbedingt erforderlich sind, wird Ihnen ein wenig Erfahrung damit wirklich helfen, diese Klasse zu verstehen , da wir den Ansichtsteil nicht sehr detailliert behandeln Wenn Sie aus einem anderen Frontend-Framework wie React kommen , sollte es Ihnen auch gut gehen, dem zu folgen Abschließend danke ich Ihnen, dass Sie sich die Zeit genommen haben, sich diesen Kurs anzusehen und ich hoffe, Sie finden ihn nützlich, um das View-Router-Paket zu erlernen. 2. Setup- und Router-Paket-Übersicht: Willkommen zu der Serie , in der wir uns das View Route-Paket ansehen werden. Insbesondere werden wir uns ansehen, wie Sie den Router hinzufügen und ihn mit der kostenlosen Version von View verwenden können. Falls Sie noch nie zuvor einen Router in anderen Frameworks oder Bibliotheken verwendet haben, handelt es sich im Grunde um ein Paket , mit dem wir zwischen Seiten mit Ansichten wechseln können . Warum brauchen wir dafür überhaupt ein Paket? Nun, im Allgemeinen erstellen wir beim Erstellen Anwendungen oder Websites mit UGS etwas, von Anwendungen oder Websites mit UGS etwas, das als einseitige Anwendung bezeichnet wird als einseitige Anwendung Eine einseitige Anwendung kann ziemlich trügerisch klingen. Das bedeutet nicht, dass unsere Website nur aus einer einzigen Seite besteht. Das bedeutet, dass hinter den Kulissen, wenn wir eine Website oder App zum ersten Mal besuchen, Regel eine einzige Javascript-Datei heruntergeladen wird. Dies ist ein großes Javascript-Bündel , das vom Server kommt. Im Frontend müssen wir uns dann darum kümmern, wie wir zwischen verschiedenen Seiten oder Komponenten in diesem Paket wechseln müssen , indem traditionellere Webtechnologien wie Php oder Ruby on Rails verwenden. Was wir normalerweise tun , wenn wir auf verschiedene Seiten oder Navigationslinks klicken , wird eine neue Seite vom Server angefordert. Bei einseitigen Anwendungen haben wir jedoch bereits alle Java-Skripte gebündelt der ersten Anfrage müssen wir zwischen diesen verschiedenen Teilen wechseln, wenn wir es mit einem Router-Paket wie dem View-Router zu tun haben wie dem View-Router Es geht aber nicht nur darum, zwischen Seiten zu wechseln. Im Allgemeinen gibt es noch viel mehr Funktionen die wir auch entdecken können, und wir werden viele davon in dieser Serie sehen. Das View Router-Paket wird auch offiziell vom View GS-Kernteam unterstützt und gewartet. Es ist tief integriert, unterstützt und auf dem neuesten Stand gehalten. Wenn Sie es wirklich einfach halten möchten, gibt es auch einen CDN-Link , den Sie für den View-Router verwenden können Aber für diese Demonstration werde ich ein Build-Tool verwenden Ich werde das Vt-Paket verwenden. VT wird es uns praktisch ermöglichen, ein Gerüst zu erstellen oder eine neue View-Dress-Anwendung zu erstellen Und es wird uns eine Menge nützlicher Funktionen bieten, wie z. B. den Austausch von Modulen im laufenden Betrieb, wodurch der Browser automatisch aktualisiert wird Jedes Mal, wenn wir ohne weitere Gespräche Änderungen an unserem Projekt vornehmen , werden wir mit der Erstellung eines neuen Projekts fortfahren Dafür werde ich Visual Studio-Code verwenden. Springe in das Terminal , das hier eingebaut ist. Das können wir in der VGS-Dokumentation sehen. Um eine neue View-Anwendung zu erstellen, müssen wir MPM in View verwenden Spätestens müssen Sie sicherstellen, dass Sie die neueste oder eine aktuelle Version von Node JS installiert haben neueste oder eine aktuelle Version von Node JS installiert Sie können dies testen, indem Sie MPM v für Version in eingeben, es ist derzeit auf Version 8. Dann können wir den CD-Befehl verwenden, um in ein beliebiges Verzeichnis zu wechseln , in das Sie wechseln möchten In meinem Fall werde ich zum Desktop wechseln , um dieses Projekt zu installieren. Und dann können wir den Befehl init ausführen. Das ist spätestens die MPM-Ansicht. Das Praktische an der Erstellung eines neuen View-Free-Projekts ist, dass wir zu diesem Zeitpunkt auch das View-Router-Paket installieren können diesem Zeitpunkt auch das View-Router-Paket installieren Wenn wir zusätzliche Pakete installieren müssen , ist das in Ordnung. Der Projektname sagt einfach Router anzeigen. Ein Typoskript? Nein, wir brauchen JSX nicht. Wir können den View-Router hinzufügen , weil das der Zweck der Serie Wir benötigen kein State-Management oder Tests. Okay, und lassen Sie uns das innerhalb von Visual Studio Code öffnen , es hineinziehen. Möglicherweise müssen Sie das Terminal auch erneut öffnen. Und von hier aus, kurz bevor wir weitermachen, müssen wir MPM install ausführen, um all die No-Pakete zu installieren, die wir Okay? Der letzte Schritt , den wir benötigen, ist MPM Run Dev, um unseren Entwicklungsserver auszuführen So können wir unser Projekt im Browser sehen. Kopieren Sie diesen Link oder drücken Sie den Befehl und klicken Sie bei gedrückter Ctrl-Taste , um ihn zu öffnen. Wir haben jetzt erfolgreich ein neues View-Free-Projekt erstellt. Eines der Dinge, die Ihnen sofort auffallen werden , wenn Sie die View-Route zu diesem Zeitpunkt installiert haben, ist dass wir zwei Links haben, zwischen denen Sie wechseln können. Wir haben den Home-Link und auch die Info-Seite. Wir haben einige Routing-Funktionen von Haus aus, aber wir müssen auch unsere eigenen Routen und unsere eigenen Funktionen hinzufügen . Lassen Sie uns einen Blick hinter die Kulissen und sehen, wie das passiert. Wenn wir in den Quellordner gehen, im Router-Ordner, haben wir diesen Index. Sie werden ganz oben in dieser Datei sehen, dass wir das View-Router-Paket bereits installiert haben das View-Router-Paket bereits installiert da wir es bei der Einrichtung des Projekts hinzugefügt haben. Dies importiert zwei Dinge aus diesem Paket. Der erste ist Create Router , den Sie hier sehen können. Dadurch wird ein neues Router-Objekt mit all unseren Routen und Konfigurationen erstellt. Sie können das Innere sehen, wir können zwischen der Historie wählen oder wir können auch den Hash-Modus einrichten. Und wir werden uns das später ansehen, aber wahrscheinlich befindet sich die Zeit, in der Sie die meiste Arbeit mit dem Router verbringen , innerhalb dieses Router-Arrays. Wenn wir hier einen Blick hinter die Kulissen werfen, ist jede unserer Routen als Objekt eingerichtet. Für die einfachste Variante haben wir hier einen Dateipfad eingerichtet. Und das ist nur das Home-Verzeichnis. Dies ist der, den wir sehen, wenn wir einfach zu unserer Projekt-URL gehen. Dies ist ein Name oder ein Alias, den wir jeder dieser Routen geben und auf den wir später verweisen können , wenn wir unsere Links-Komponente einrichten , die wir anzeigen möchten. Wenn wir auf dieser Seite sind, haben wir etwas importiert, das als Home-Ansicht bezeichnet wird. Wir können oben sehen, dass diese Startansicht aus dem Views-Ordner abgerufen wurde. Schauen Sie sich die Seitenleiste an, öffnen Sie die Ansichten und schon haben wir unsere Home- und unsere Info-Ansicht Wenn wir hier eine dieser beiden Ansichten öffnen , kommen wir Ihnen ziemlich bekannt vor, wenn Sie in der Vergangenheit mit VGS gearbeitet haben in der Vergangenheit mit VGS gearbeitet und diese genau so eingerichtet sind wie eine normale GS-Komponente für Ansichten Wir haben die Vorlage, die unseren HTML-Code zur Seite hinzufügt. Wir können einen optionalen Stilabschnitt haben, und wir können auch einen zweiten Skriptabschnitt haben Diese sehen genauso aus wie unsere Komponenten, die wir hier sehen können. Der einzige Unterschied in Bezug auf die Struktur besteht darin dass wir diese in einem Views-Ordner organisieren. Wir wissen, zwischen welchen wir mit dem Router wechseln müssen . Nur zur Verdeutlichung: Eine Komponente kann beliebiges einzelnes Element oder ein beliebiger Abschnitt unserer Seite Wir stellen jedoch sicher, dass unser Views-Ordner die Routen enthält , zwischen denen Sie mit dem Router wechseln möchten. Zurück zur Routenindexseite können wir nach unten scrollen und unser zweites Router-Objekt sehen. Dies hat den Schrägstrich etwa vorwärts. Wir können das auch eingeben, es ist Enter, und wir gehen dann zur Info-Seite über Das hat auch einen Router-Namen, aber der Unterschied zwischen unseren beiden Routen besteht darin, dass die erste Route direkt auf Komponenten verweist und die zweite einen sogenannten Import durchführt. Wie wir hier sehen können, haben wir oben einige Kommentare. Das sagt uns , dass wir, anstatt unsere Komponenten direkt zu importieren, einschließlich dieser Komponenten mit dem Rest des Pakets, unsere Ansichten voneinander trennen Wir können also etwas nutzen, das Lazy Loading genannt wird. Dies ist eine der anderen Funktionen des View-Router-Pakets. Es ist auch zu diesem verzögerten Laden fähig. Wie bereits erwähnt, wird das vollständige Javascript-Paket vom Server heruntergeladen, wenn wir zum ersten Mal eine einzelne Seitenanwendung aufrufen und die URL eingeben vollständige Javascript-Paket vom Server heruntergeladen . Obwohl wir dieses große Paket manchmal nicht wollen, könnte es sich um eine wirklich große Anwendung handeln. Anstatt eine einzige Jar-Skriptdatei zu haben , können wir diese in separate Dateien aufteilen. Das ist hier passiert. Wir haben die Info-Ansicht in eine separate Datei aufgeteilt. Diese wird nur vom Server heruntergeladen , wenn wir auf den Info-Link klicken Wenn Sie möchten, können wir auch wie oben beschrieben zu einer regulären Komponente wechseln, sagen wir mal über uns. Wir müssten das auch wie oben importieren . Wir importieren die Info-Ansicht. Dies ist neben der Home-Ansicht. Wir müssen nur den Namen ändern. Sag das. Vt aktualisiert die Seite automatisch. Wir können immer noch zwischen diesen beiden Routen wechseln. Schließlich müssen wir diesen Router in unser View-Paket aufnehmen . Also exportieren wir das unten und dann in die Hauptdatei. Diese exportierte Router-Datei wird dann in unsere Haupt-Javascript-Datei importiert. Der Rest sind reguläre Ansichten. Wir erstellen eine neue View-GS-Anwendung, die in der App gespeichert ist. Dann können wir dieses Router-Paket zu unserer Anwendung hinzufügen , bevor es dann im Dom installiert wird. 3. RouterLink & RouterView: Zuvor haben wir ein View-Free-Projekt eingerichtet. Wir haben das View-Router-Paket installiert. Wir haben uns kurz die Router-Optionen angesehen. der Indexseite des Routers befinden sich unsere Routenobjekte, die einer bestimmten Komponente zugeordnet sind. Fold-About rendert beispielsweise diese Ansicht mit dem Namen About-Ansicht. Wir können das sehen, wenn wir uns unsere beiden Links hier auf der rechten Seite ansehen unsere beiden Links hier auf der rechten Seite und zwischen unseren beiden Ansichten wechseln. Derzeit ist es jedoch möglicherweise noch ein kleines Rätsel, wie genau diese beiden Links diese URLs ändern. Dies liegt daran, dass diese beiden Links standardmäßig hinzugefügt werden , wenn wir unser Projekt einrichten Lassen Sie uns einen Blick hinter die Kulissen und sehen, wie wir diese selbst einrichten und weitere für dieses Projekt hinzufügen können selbst einrichten und weitere für dieses Projekt hinzufügen weitere für dieses Projekt Unsere Links wurden automatisch in der App-Ansicht eingerichtet, sie können aber auch in jeder anderen Komponente enthalten sein. Zweitens können wir oben sehen, wir etwas aus dem View-Router-Paket importieren müssen. Und das ist etwas , was wir brauchen, ist eine Router-Link-Komponente. Das ist der gesamte Code, den wir gesehen haben. Auf der linken Seite haben wir das View-Logo, das Sie hier sehen. Wir haben die Hello World-Komponenten mit der Nachricht. Dann haben wir unsere beiden Nav-Links. Unten hier werden wir die Router-Link-Komponenten verwenden, die wir aus dem View-Router-Paket importiert haben. Sie können sehen, dass es ein Attribut namens 22 hat . Es ist der Ort , zu dem wir verlinken wollen wenn darauf geklickt wird und wir haben den Text von Home und über welche Links zu diesen beiden URLs Sie fragen sich vielleicht auch, warum Sie nicht einfach das reguläre HTML-Element verwenden , um zwischen den Seiten im Inneren zu verlinken Hier können wir einen Schrägstrich verwenden oder wir könnten auch sagen, dass es aus mehreren Gründen vorzuziehen ist, bei der Verwendung von View GS den Router-Link den herkömmlichen A-Elementen vorzuziehen den Router-Link den herkömmlichen A-Elementen bei der Verwendung von View GS Einer der großen Unterschiede besteht darin, dass, wenn wir den Verlaufsmodus wie derzeit verwenden, und verhindern muss das View-Router-Paket den Klick von einem dieser Links abfangen und , dass der Browser die Seite aktualisiert, was automatisch geschieht Wenn Sie View GS oder eine Einzelseitenanwendung verwenden. Wir benötigen diese Seitenaktualisierung nicht da wir automatisch den gesamten Jarvscript-Code im Paket verfügbar haben den gesamten Jarvscript-Code im Paket verfügbar , zwischen dem wir wechseln können Lass uns das entfernen. Außerdem, nur als kurze Randnotiz zwei: Wenn Sie das View-Router-Paket verwenden, das auf View Two basiert, haben Sie möglicherweise das Tag prop verwendet , das genau so aussieht Früher haben wir damit genau festgelegt, als welche Art von HTML-Element wir das gerendert haben wollten , aber das ist in diesem Paket nicht mehr verfügbar Außerdem sind wir bei der Verwendung von Route to Link nicht nur darauf beschränkt, eine statische Zeichenfolge an unsere beiden Requisiten zu übergeben , genau wie hier Wir können auch alle dynamischen Daten übergeben, die Sie möchten. Zum Beispiel haben wir vielleicht einen Benutzer und möchten ihn mit einer bestimmten Benutzer-ID verknüpfen. Gehen wir zu unserem Skript. Wir richten eine Konstante namens user ein, die ein Objekt sein wird. Aber bevor wir das tun, packen wir das in Ref. Wir müssen ref aus dem View-Paket importieren , falls Sie das noch nie gesehen haben. Dies ist eine Funktion ohne Ansicht, was bedeutet, dass der gesamte Inhalt reaktiv bleibt. Daher wird jede Komponente, die auf diesen Daten basiert , bei jeder Änderung aktualisiert. Von hier aus können wir unsere Daten als Objekt übergeben und sagen so etwas wie den Namen der Benutzer-ID. Da wir die Einrichtung eines Skripts verwenden, wird unser Benutzer automatisch von unserem Skript zurückgeleitet und zur Verwendung zur Verfügung gestellt. Keine Vorlage. Wir können das in den doppelten Klammern öffnen, da sind Daten, die wir benötigen, aber wir können sie auch innerhalb der beiden Requisiten verwenden Lassen Sie uns das duplizieren, wir schauen uns ein Beispiel an. Wir brauchen immer noch doppelte Anführungszeichen, um all das zu umgeben, aber wir können die Javascript-Baktik nutzen , um Javascript-Variablen einzuführen. Vielleicht möchten wir zu etwas wie einem Schrägstrichbenutzer wechseln. Dann können wir mithilfe des Dollarsymbols und der geschweiften Klammern unsere dynamischen Daten wie unsere Sagen wir einfach Benutzer. Aber wenn wir zum Browser gehen und das ausprobieren würden, würde dies zu einem Problem führen. Lass uns das versuchen. Klicken Sie auf den Benutzer. In diesem Linkschlüssel sehen wir eher die Benutzer-ID als den dynamischen Wert. Wie bei allem anderen in View Free müssen wir, wenn wir dynamische Daten verwenden, wenn wir dynamische Daten verwenden, auch die V-Bind-Syntax verwenden, bei der es sich um einen Doppelpunkt handelt. Und das weist View GS an, dies nicht als Zeichenfolge zu rendern, sondern stattdessen die Werte der verfügbaren Dateien zu berücksichtigen die Werte der verfügbaren Dateien zu berücksichtigen , die wir jetzt übergeben, wenn wir auf den Benutzer klicken Dies beinhaltet nun die dynamischen Daten, die wir benötigen. Dies gibt uns zunächst eine Vorstellung von der Flexibilität, die wir mit dem View-Router haben. Wir können auch noch weiter expandieren, indem wir ein Objekt übergeben. Nochmals, da wir dynamische Daten oder Java Script verwenden , müssen wir den Doppelpunkt hinzufügen und das entfernen. Wir können dann unsere Zeichenfolge an das Javascript-Objekt übergeben. Es ist am einfachsten. Dieses Javascript-Objekt kann einfach den Pfad enthalten , den wir uns gerade angesehen haben, einen Schrägstrich Das Gleiche gilt für den About-Link, ein Objekt für den Pfad übergeben wird, aber dieser war vorwärts gerichtet. Das sollte immer noch genauso funktionieren wie zuvor. Wir werden sehen, wie zwei Links oben funktionieren. Wir hätten das richtig buchstabiert. Das funktioniert gut, aber das ist nur ein einfaches Beispiel, und wir haben keine zusätzlichen Funktionen zuvor. Aber wir können diesem Objekt stattdessen einen Verweis auf die Namen übergeben , die wir diesen Routen bereits in der Router-Datei gegeben haben. Wenn Sie sich an das vorherige Video auf der Router-Indexseite erinnern , hatte jede dieser Routen eine eindeutige Namenseigenschaft, die wir zu Hause und unterwegs hatten Wir können innerhalb unseres Objekts auf Referenzen verweisen, wobei dieses Objekt den Namen home weitergibt Tatsächlich mussten Kleinbuchstaben übereinstimmen. Und auch für ungefähr, lass uns das mal ausprobieren. Sie fragen sich vielleicht, warum wir uns all diese Mühe gegeben haben, obwohl es genauso funktioniert wie ursprünglich. Nun, einer der Gründe und einer der Vorteile der Verwendung von Namen ist die Benutzerfreundlichkeit. Wenn Sie darüber nachdenken, wenn wir diesen Router-Link über uns an mehreren Stellen in unserem Projekt hätten Router-Link über uns an mehreren Stellen in und wir dann vielleicht eines Tages entscheiden würden , dass wir den Link nicht als Schrägstrich verwenden würden, wir ihn vielleicht in etwas wie Schrägstrich über uns ändern wollen wie Schrägstrich über Nun, anstatt auf jede einzelne unserer Ansichten oder Komponenten einzugehen und diesen Link zu ändern, müssen wir nur in unsere Router-Datei gehen und den Pfad zu Über uns ändern Dieser Name wäre immer noch relevant und würde immer noch in allen unseren Komponenten funktionieren. Das ändert sich nur wieder. Okay, das nächste, was es zu entdecken gilt, ist etwas namens Route of View. Wir haben herausgefunden, wie wir über den Router-Link, den wir hier haben, zwischen unseren Seiten wechseln können . Wir haben aber auch etwas namens Route of View importiert. Diese Route of View ist dafür verantwortlich , dass unsere Seite auf dem Bildschirm dargestellt wird. In der App haben wir diesen Kopfbereich , der aufgrund des Standardstils auf der linken Seite platziert wurde. Dann wird auf der rechten Seite der Inhalt unserer beiden Ansichten angezeigt. Der Grund dafür ist, dass wir die Route der Ansicht am Ende dieser Datei platziert haben . Dies ist das Outlet für unsere Inhalte. Wenn Sie dies beispielsweise entfernen und an einem anderen Ort platzieren möchten, wird es jetzt nach links verschoben. Dies gibt uns die volle Flexibilität , wo wir die Inhalte unserer Seiten rendern. 4. Parameter und Abfragen: Das Paket „Routen anzeigen“ bietet auch viel mehr als nur das Umschalten zwischen Komponenten Es kann auch verwendet werden, um Daten in Form von Parametern zu übergeben und auch Zeichenketten abzufragen, wenn mit URLs gearbeitet Genau wie wir hier sind, arbeiten wir gerade mit dem Home- und dem Forward-About-Link Möglicherweise möchten wir auch zusätzliche Informationen wie Pam hinzufügen , genau wie ein Benutzer Und oft benötigen wir zusätzliche Informationen , z. B. Abfragen, frühere URLs, einem Fragezeichen wie diesem versehen sind Und dann werden wir einige zusätzliche Informationen wie diese sehen . Jetzt wollen wir uns ansehen, wie wir mit beiden Parametern, Anfragen innerhalb des View-Routers, arbeiten können Anfragen innerhalb des View-Routers Gehen wir zu unserer App-Ansicht in der wir unsere beiden Router-Links haben Zuerst schauen wir uns Parameter oder Parameter an, die wie Variablen für eine bestimmte Route in der Router-Verbindung sind wie Variablen für eine bestimmte Route in der Router-Verbindung Wir können diese innerhalb unserer beiden Requisiten hinzufügen. Denken Sie daran, dass wir uns früher mit dem Hinzufügen von Variablen befasst haben, genau wie hier. Und das ist das auskommentierte Beispiel. Was wir tun wollen, ist die Namensroute zu entfernen. Tatsächlich werden wir das einfach auskommentieren und dann duplizieren. Also werden wir das vollständig intakt lassen. Wir können den Pfad so einrichten, wie wir es zuvor getan haben. Dies wird mit einer bestimmten Benutzer-ID verknüpft, die wir in diesem Objekt gespeichert haben. Der Pfad, da wir Variablen verwenden, können wir diese mit den Bactics setzen Wir sagen Benutzer weiterleiten, dann möchten wir vielleicht die Benutzer-ID haben wie wir sie hier haben, indem wir Job-Skript verwenden , um Änderungen der Benutzer-ID in den Benutzerlink Dann können wir sehen, dass wir diesen Benutzerlink jetzt aktualisiert haben. Und wenn wir darauf klicken, sehen wir unseren Benutzer. Und dann die Variable, die gleich danach ist, das ist unsere ID von 1234, aber wir haben derzeit keine entsprechende Komponente zum Rendern. Was wir tun werden, ist die „Über uns“ -Ansicht zu ändern, wir sagen Benutzeransicht. Wir ändern das. Wir müssen auch zu unserem Router wechseln. Und dann der Index JS, wir ändern die About-Ansicht, die Benutzeransicht. Das wird auch hier aktualisiert. Die zweite Komponente, der Name des Benutzers. Jetzt müssen wir dies auch ändern, um einen Schrägstrich als Benutzer zu verwenden. Wenn wir jetzt darauf klicken, werden wir immer noch sehen, wir ein Problem in der Konsole haben, obwohl wir einen Schrägstrich-Benutzer dass wir ein Problem in der Konsole haben, obwohl wir einen Schrägstrich-Benutzer besitzen Wir haben keine Treffer für den Schrägstrich-Benutzer und dann unsere Benutzer-ID weiterleiten Das liegt daran, dass wir nicht die vollständige URL berücksichtigen . Mit diesem Pfad haben wir eine Variable, die wir wollten fest kodieren lassen könnten, wenn wir 1234 weiterleiten Und dann sehen wir, dass wir auf die Info-Seite weitergeleitet werden und sie zur Benutzerseite wechselt, es ist konsistent, wir können immer noch sehen, dass wir auf die richtige Seite weitergeleitet werden. Aber das Problem, das wir möglicherweise haben, ist dass diese Route nicht gefunden wird, wenn wir eine andere Benutzer-ID haben, wenn sich jemand anderes angemeldet hat. Stattdessen müssen wir in der Lage sein, jede andere hinzugefügte URL zu erfassen jede andere hinzugefügte URL und diesen Abschnitt effektiv als Variable zu behandeln. Um dies auf der Indexseite des Routers zu tun , können wir, anstatt einen fest codierten Wert wie diesen zu verwenden, den Doppelpunkt verwenden, um den Wert innerhalb einer Variablen namens ID zu erfassen den Wert innerhalb einer Variablen namens ID Jetzt versteht das View-Router-Paket , dass dieser Abschnitt oder dieses Segment der URL eine Variable ist und sich ändern könnte, und es wird immer noch unsere Benutzeransicht wiedergeben Jetzt können wir alles eingeben, was wir wollen, und das wird immer angezeigt. Als Nächstes müssen wir uns überlegen , wie wir diese Benutzerinformationen in unsere Seite oder Komponenten integrieren können . Nun, wenn wir darüber nachdenken, ob es sich um einen Benutzer handelt und wir die eindeutige Benutzer-ID abrufen möchten, möchten wir vielleicht diesen oder einen ähnlichen Benutzernamen in den Komponenten anzeigen . Der Weg, dies zu tun, besteht darin, diesen Variablennamen zu verwenden , den wir im Pfad angegeben haben. Denken Sie daran, dass wir diese ID genannt haben. Wenn wir zur Benutzeransicht wechseln, können wir mithilfe der Route mit dem Symbol 1$ auf die aktuellen Routeninformationen innerhalb der Doppelkalibrationen zugreifen Route mit dem Symbol 1$ auf die aktuellen Routeninformationen innerhalb der Doppelkalibrationen Sag das Refresh. Wir können sehen, dass alle aktuellen Routeninformationen angezeigt werden. Wir haben den vollständigen Pfad, den wir genau in der URL-Leiste sehen. Wir haben den Namen, den wir in der Router-Datei eingerichtet haben. Wir haben auch die Parameter, anhand derer wir sehen können, dass die ID derzeit mit der übereinstimmt, die wir hier haben. Genau so können wir innerhalb unserer Komponente auf diese ID-Informationen zugreifen innerhalb unserer Komponente auf diese ID-Informationen Wir zeigen gerade die Route an. Da es sich um ein Objekt handelt, können wir DopaMD sagen , um diesen eingegebenen Wert zu erfassen Lass uns diese Route ausprobieren. Peramed. Jetzt wird jeder Wert, den wir zu seinem ID-Segment hinzufügen seinem ID-Segment , in der Vorlage angezeigt Ebenfalls nur als Randnotiz zwei. nur die Dollarsymbol-Route verwenden, Wir können nicht nur die Dollarsymbol-Route verwenden, sondern auch auf den Dollarsymbol-Router zugreifen. Dadurch erhalten wir etwas mehr Informationen zu allen Router-Funktionen. Wir können Dinge wie die Optionen sehen , für die wir den Verlaufsmodus eingestellt haben. Wir können die aktuelle Route sehen. Wir können alle unsere Routen sehen , die als Array eingerichtet sind. Hier haben wir das Zuhause und auch die zweite Route , die unser Benutzer ist. Dies sind alles dieselben Routeninformationen, die wir auf unserer Router-Seite eingerichtet haben . Router mit Dollarsymbol bietet Ihnen erneut weitere Informationen zum vollständigen Router-Paket. Route mit dem Dollarsymbol werden nur Informationen über die aktuelle Route angezeigt Informationen über die aktuelle , die wir gerade besuchen. Dies ist nicht immer der Weg, den wir einschlagen wollen, wenn wir auf Variablen oder Informationen in unserer Vorlage zugreifen möchten. Vielleicht möchten wir diese auch in unser Jar-Skript aufnehmen. Zur Art und Weise, wie wir das tun können , wenn wir die Kompositions-API verwenden, was wir derzeit verwenden, nehmen wir an, wir haben ein Skript und wir werden das eingerichtete Skript verwenden. Wir können diese auch aus dem Router-Paket use route importieren . Wir können hier anhand der Informationen erkennen, dies der Route mit dem Dollarsymbol entspricht , die wir gerade verwendet haben. Dies sind alle Informationen über unsere aktuelle Route, einschließlich der Parameter, wenn Sie möchten Sie können den Import auch über den Router importieren. Dies entspricht einem Router mit Dollarsymbol. Wir möchten diese aus dem View-Router-Paket importieren. Dann greifen wir auf diese zu, genau wie bei allen anderen Composables in View Wir verwenden Route, wir rufen sie als Funktion auf und speichern den Rückgabewert in einer Variablen Nehmen wir an, cont route entspricht dem. Wenn wir das dann duplizieren, können wir auch auf den Router-Platz zugreifen In einer Konsolen-Log-Route beeilen wir uns und wir können sehen, dass die Informationen in unserem Tag-Objekt platziert sind. Wir haben den Namen, die Parameter, die Abfragen, die wir uns bald ansehen werden, den vollständigen Pfad, auf dem wir uns gerade befinden Jetzt steht es uns frei, alle Teile dieser Informationen in unserem Code zu verwenden dieser Informationen in unserem Code zu Es ist auch erwähnenswert, Sie auch mehrere dynamische Segmente in der URL haben können . Sie könnten auch weiterleiten sagen und hier eine neue Variable Insider einfügen. Dann müssen Sie nur noch auf die Indexseite des Routers gehen und eine neue Variable einrichten, um diese Informationen zu erfassen Jetzt wird es unter diesem Namen verfügbar sein. kann der View-Router Darüber hinaus kann der View-Router auch Abfragezeichenfolgen verarbeiten. Zweitens, wenn Sie noch nie zuvor eine Abfragezeichenfolge verwendet haben, können sie einige zusätzliche Informationen in einer URL übergeben , genau wie wir es zu Beginn gesehen haben. Möglicherweise haben Sie eine URL gesehen , die genau so aussieht. Gehen wir zurück zu unserer ersten oder unserer Home-URL. Möglicherweise sehen Sie etwas, das so aussieht, mit einem Fragezeichen. Und dann können wir sagen, dass der Benutzer einer bestimmten Zeichenfolge entspricht. Dann können wir mehrere Informationen hinzufügen, die durch das Unwort getrennt sind , und den Namen Plan, der monatlich entspricht, sagen Wir können immer weiter machen und so viele davon hinzufügen, wie wir möchten, damit wir auf unseren Benutzer zugreifen können Wir können auf unseren Plan zugreifen und wir können auf unseren Namen zugreifen , da diese nach diesem Fragezeichen getrennt sind . Schauen wir uns an, wie wir diese verwenden können. diese Pre-Strings kann lokal zugegriffen oder sie können auch an den Server gesendet werden. Ein typischer Anwendungsfall hierfür wäre das HTML-Formular. Gehen wir rüber zur Ansicht. Lassen Sie uns die Aktion zum Entfernen in einem Formular platzieren. Da wir wollen, dass View GS das handhabt, richten wir schnell ein Formular mit einem Eingabe-Text ein. Der Name wird dem Namen user entsprechen. Dieser Namensabschnitt wird bei der Arbeit mit Abfragen sehr wichtig sein. Wir werden das in der Abfragezeichenfolge sehen. Lass uns einfach noch einen einrichten. Wir sagen den Standort, eine Eingabe, den Namen des Standorts. Dann endlich ein Button zum Abschicken. Diese Form, einen beliebigen Text hier einzureichen , ist in Ordnung, um dies zu sehen. Gehen Sie zum Browser, stellen Sie sicher, dass wir den Benutzer nicht gefunden haben, geben Sie den Namen und den Standort ein und klicken Sie auf Senden. Sobald Sie dies tun, können Sie sofort sehen, getrennt durch ein Fragezeichen, dass wir unsere beiden Informationen haben. Der Benutzer entspricht Chris und auch der Standort entspricht Großbritannien. Und beide werden erfasst, da wir jeder unserer Eingaben das Namensattribut hinzugefügt haben jeder unserer Eingaben das Namensattribut Sowohl der Benutzer als auch der Standort werden beim Absenden mit dem Formular an den Server gesendet. Wenn Sie nichts über Formulare oder das Senden von Formularen an den Server wissen , machen Sie sich über diese Informationen keine Gedanken. Alles, was wir hier wissen müssen, ist dieses Beispiel und bei der Verwendung von Formularen diese Abfragen oder diese Abfragezeichenfolgen automatisch zu unserer URL hinzugefügt. Wenn wir jedoch mit dem View-Router-Paket arbeiten, können wir diese beiden auch manuell hinzufügen und innerhalb aller Seiten oder Komponenten auf sie zugreifen . Gehen wir zu unserer App View, die unsere Router-Links enthält. In diesem Fall platzieren wir es innerhalb des Home-Links, innerhalb des durch ein Komma getrennten Objekts Wir können unsere Abfrage einrichten , die einem Objekt entspricht Dann fügen wir hier, wie bei jedem anderen Objekt, unseren Objektschlüssel und unsere Objektwerte hinzu In diesem Beispiel platzieren wir es in einem Token, das eine beliebige Textzeichenfolge sein kann. Sie können hier auch Variablen einfügen , wenn Sie etwas speichern möchten. Jetzt ist der Zugriff innerhalb unserer Komponenten ein Token. Da wir über den Home-Link von hier innerhalb der doppelten Kalibrationen in die Home-Ansicht springen , können wir auch hier wieder auf die Route mit dem Dollarsymbol für die aktuelle Route in den Home-Link zugreifen die aktuelle Route in den Home-Link Das sind alle unsere Informationen. Und Sie können hier sehen , dass wir diese Abfrage haben , die unserem Token entspricht Wir können diese Routenabfrage nach unten einschränken, wodurch wir unser Token erhalten, und wir können auch einfach mit dem Token auf den Wert zugreifen Wenn Sie sich auch die URL ansehen, können Sie sehen, wie das Token jetzt angewendet wurde Dies ist eine bequeme Möglichkeit, kleine Informationen zwischen unseren Routen weiterzugeben . So etwas wie Zugriff, Token verwenden IDs oder andere kleine Informationen. 5. Verschachtelte Routen: Wie bereits in diesen Lektionen erwähnt , ist der View-Router sehr flexibel Derzeit nutzen wir jedoch nicht die volle Flexibilität, die er bietet. Alles, was wir haben, ist in dieser App-Ansicht Wir haben unsere beiden Router-Links, um zwischen unseren Pfaden zu wechseln. Wir sind dabei, diese innerhalb einer einzigen Sichtroute zusammenzufassen. Das ist nicht sehr flexibel. Das heißt einfach, dass wir unsere beiden Links haben und der gesamte Inhalt aller zusätzlichen Links immer am selben Ort sein wird. Aber lassen Sie uns die Dinge ein wenig ändern und sehen, wie wir mit verschiedenen Situationen umgehen können. Lassen Sie uns dem Benutzer auch einen einfachen Pfad wiederherstellen. Wir werden das duplizieren und den Benutzerkontenbereich innerhalb des Pfads erstellen Dies wird immer noch dynamisch sein, also können wir sagen, Konto weiterleiten, dann können wir unsere Benutzer-ID eingeben. Das muss ganz oben stehen, also ist es die Benutzer-ID. Wir müssen dies auch in unserem Router-Index einrichten. Für diese Kopie gibt jede dieser Routen den Namen des Kontos an und es wird auch eine neue Komponente namens Kontoansicht erstellt Denken Sie daran, dass wir den Benutzerbereich geändert damit wir die dynamischen Segmente entfernen können, aber wir müssen ihn zu unserem Kontobereich hinzufügen. Das ist Konten weiterleiten. Wir wählen die Benutzer-ID aus, Wir wählen die Benutzer-ID um eine neue Ansicht in unserem View-Ordner zu erstellen. Duplizieren Sie eines davon. Dies ist die Kontoansicht. Klären Sie das alles auf, ein bisschen Text hier drin. Wir müssen das auch in die Route importieren , um es zu archivieren, zu kopieren und einzufügen Und das ist die Kontoansicht. Sollte alles gut funktionieren. Jetzt haben wir das Zuhause, den Benutzer und auch das Konto. Dies weist auch darauf hin, wie wir ID verwenden und die neue Komponente anzeigen , die wir gerade erstellt haben. Um zum Zweck dieses Videos zurückzukehren, werden wir uns verschachtelte Routen ansehen Die Idee hinter verschachtelten Routen ist die Verwendung dieser Links. Derzeit ersetzen wir den gesamten Abschnitt auf der linken Seite aufgrund unserer Sichtweise Aber was wäre, wenn wir zum Beispiel nicht die gesamte Kontoseite ersetzen wollten ? Stattdessen möchten wir vielleicht einige Ansichten darunter platzieren, z. B. einige frühere Bestellungen oder sogar das Benutzerprofil. Um dies als Beispiel zu sehen, gehen wir zurück zu unseren Ansichten und erstellen zwei neue Ansichten. Kopieren Sie das und fügen Sie es ein. Eine davon ist, Befehle zu verwenden. Ändern Sie einfach den Text in Bestellungen. Kopieren Sie dann diesen und fügen Sie ihn ein. Und das kann sein, das Profil aktualisieren, den Text ändern und sicherstellen, dass beide in der App-Ansicht gespeichert sind. Und wir können beide unten mit einem Router-Link verbinden. Die erste ist die Aktualisierung des Profils und die zweite für unsere neue Ansicht, bei der es sich um frühere Bestellungen handelt. Wie bereits erwähnt, möchten wir nicht, dass diese beiden Links einfach den gesamten zusätzlichen Inhalt oben überschreiben den gesamten zusätzlichen Inhalt oben und in unseren Ansichtsrouten angezeigt werden. Da diese beiden neuen Routen stattdessen mit unseren Konten verknüpft sind, kann es sinnvoll sein, diese beiden Routen als untergeordnete Routen dieses Kontos so aussehen zu lassen. Wir können diese beiden vollständigen Abschnitte kopieren und einfügen. Aber anstatt zum Forward-Slash-Konto und dann zur Benutzer-ID zu wechseln, verlinken wir dann auf das Update für unsere vorherigen Bestellungen Das wird ähnlich aussehen, aber hier wären Bestellungen mit Schrägstrich Speichern Sie dies und gehen Sie dann zu unserem Router-Index, wo Sie unsere beiden neuen Ansichten importieren können Dupliziere das zweimal. Dies ist ein aktualisiertes Profil, decken Sie dies ab und fügen Sie es dem Pfad hinzu. Und der zweite ist für Gebrauchsbestellungen. Damit sind wir jetzt in einer Position, in der wir zwei neue Routen bewältigen müssen. Wir haben einen Weg, nämlich Forward Slash Accounts und dann Forward Slash Wir wollen die Benutzer-ID abrufen, also wollen wir dafür den Doppelpunkt verwenden Wir können das in einer Variablen dann das Slash-Update weiterleiten Die zweite, die Sie bearbeiten möchten, ist dieselbe , Schrägstrichbefehle Eine Möglichkeit besteht darin, hier zwei neue Routenobjekte für diese beiden URLs zu erstellen hier zwei neue Routenobjekte für diese beiden URLs Dies ist jedoch nicht ideal, da, wie wir bereits erwähnt haben , jede dieser neuen Ansichten die Kontoseite ersetzen wird. Aber wir wollen, dass sie drinnen platziert werden. Um dies innerhalb unseres Account-Route-Objekts zu behandeln, können wir ein Childr-Array hinzufügen. Dieses untergeordnete Array deklariert, welche Komponenten innerhalb dieser Kontoseite der obersten Ebene verschachtelt werden sollen So sieht es aus, sobald unsere Komponenten im untergeordneten Array platziert werden Jedes dieser untergeordneten Objekte ist ein Objekt, das sowohl den Pfad als auch die Komponente übernehmen wird . Alles, was wir tun müssen , ist Forward Update hinzuzufügen. Aber anstatt dies auf der obersten Ebene hinzuzufügen, fügen wir es innerhalb des untergeordneten Pfads hinzu. Wenn wir auf dieser URL landen, werden wir die Komponente, bei der es sich um das Aktualisierungsprofil handelt, durch ein Komma getrennt anzeigen Aktualisierungsprofil handelt, durch ein Komma getrennt Wir können auch Termingeschäfte ausführen , wodurch unsere Bestellungen von uns genutzt werden Wir haben zwei Routen bearbeitet und können diese jetzt entfernen. Das sollte schon sein. Um das zu testen, haben wir unten zwei neue Links. Klicke auf Profil aktualisieren, wir können es sofort sehen. Wir gehen zum Fold-Konto und folden dann die Benutzer-ID, was dieser Abschnitt genau hier ist Dann folden Sie auch das Update. Lass uns die vorherigen Bestellungen testen. Klicken Sie erneut darauf, derselbe Account, die Benutzer-ID, und dann wird am Ende Fold-Orders hinzugefügt. Okay, du denkst vielleicht, großartig. In der Kontoansicht können wir diesen Text auf der linken Seite sehen, aber wir sehen keinen Hinweis auf unsere beiden untergeordneten Komponenten. Nun, dafür müssen wir VGS genau sagen , wo diese Komponenten angezeigt werden sollen Wenn wir in die Kontoansicht gehen, der View-Router keine Ahnung, wo wir das in der Vorlage anzeigen wollen Wir müssen das erklären, indem wir eine zusätzliche Router-Ansicht hinzufügen. Okay, gehen wir zu unseren Konten ohne zusätzliche Inhalte. Klicken Sie unten auf Profil aktualisieren. Wir sehen diesen Text von Profil aktualisieren, sich gerade hier befindet. Klicken Sie abschließend auf Frühere Bestellungen. Da ist unser Bestelltext , den wir hier eingerichtet haben. Beide werden jetzt in der Sichtroute unseres Kontos angezeigt . Die Formatierung sieht im Moment aufgrund des CSS etwas seltsam aus. Tatsächlich können wir das wahrscheinlich ein bisschen besser sehen , wenn wir uns den Quell-Assets befassen. Wir können das gesamte Styling von hier entfernen. Es sollte jetzt etwas klarer aussehen. Wir haben die Kontoseite oben und verwenden dann keine Sichtroute direkt darunter. Wir können dann die Routen unserer verschachtelten Kinder sehen. 6. Router-Kurse: Als Nächstes werfen wir einen Blick auf aktive Klassen und darauf, wie View JS Router diese automatisch auf unsere Links anwendet. Wenn Sie genau hinschauen, befinden wir uns derzeit auf dem Home-Link und dieser hat die etwas dunklere Farbe. Klicken Sie auf den Benutzer. Diese dunklere Farbe sollte nun auf den Benutzer angewendet werden. Das passiert für jeden unserer Links. Dies ist nützlich, wenn wir das Design für einen unserer Links anpassen und den Benutzer darüber informieren auf welcher Route er sich gerade befindet. So funktioniert das, wenn wir in die Entwickler-Tools gehen und mit der rechten Maustaste klicken und prüfen, dabei die Registerkarte „Elemente“ beibehalten und den Inspektor verwenden, um auf einen unserer Links zu klicken. Derzeit befinden wir uns auf der Heimatroute. Wenn wir uns die Klasse ansehen, können wir sehen, dass hier die Router-Verbindung aktiv ist. Und auch eine zweite Klasse von Router-Links ist exakt aktiv. Dies ist derzeit auf keinem der folgenden Links zu finden, aber wenn wir auf den Benutzer klicken, werden diese Klassen jetzt auf den Benutzerlink verschoben. Das Gleiche gilt für das Konto, dies ist unser Kontolink. Und sie werden nicht mehr auf die ersten beiden angewendet. Aber etwas anderes passiert, wenn wir auf Profil aktualisieren klicken. Wie bei den vorherigen Links werden beim Aktualisieren des Profils die beiden zusätzlichen Klassen von Router-Link aktiv und Router-Link exakt aktiv aktiviert. Der Unterschied besteht jedoch darin, dass in diesem Kontobereich auch diese einzige Klasse von Router-Links aktiv ist. Das Gleiche passiert, wenn wir auf frühere Bestellungen klicken. Über den Link „Frühere Bestellungen“ finden Sie unsere beiden zusätzlichen Klassen. Und auch auf der Kontoseite wurde diese einzelne Klasse hinzugefügt. Zuallererst werden diese Klassen automatisch vom View-Router hinzugefügt. Auf diese Weise können wir das Design für die aktuelle Seite aktualisieren . Was ist der Unterschied zwischen Router Link Active und Router Link Exact Active? Nun, der Unterschied liegt in dieser Kontoseite. Wenn Sie sich die vorherigen Videos angesehen haben, wissen Sie, dass auf der Kontoseite sowohl das Aktualisierungsprofil die vorherigen Bestellungen als untergeordnete Routen Das Konto verknüpft uns dem Forward-Slash-Konto und dann mit der Benutzer-ID Wenn wir auf Profil aktualisieren klicken, ist dieselbe URL vorhanden, aber mit dem Update am Ende früherer Bestellungen wird diese ebenfalls am Ende hinzugefügt Was hier passiert, ist mit den vorherigen Bestellungen und dem Aktualisieren des Profils. Dies beginnt mit Forward-Slash-Konten. Daher wird der Link zum Konto mit Schrägstrich gerade hier als teilweise Übereinstimmung betrachtet Wenn einer unserer Links nur teilweise übereinstimmt, geben wir die Klasse der Router-Verbindung als aktiv Da dies technisch gesehen derzeit aktiv ist. Aber wie der Name schon sagt, wird bei den anderen Links die Klasse Router Link Exact Active nur angewendet, wenn eine exakte Übereinstimmung mit ORL besteht Dies ist der aktuelle Fall für das Aktualisierungsprofil. Wenn wir auf Bestellungen klicken, entspricht dieser Link genau unserer URL. Dadurch wird auch die genaue Klasse ermittelt und das Gleiche gilt für alle anderen Links, wir klicken auf den Benutzer. Das ist nicht nur eine teilweise Übereinstimmung, sondern auch eine exakte Übereinstimmung. Wir sehen, dass beide Klassen angewendet werden. Der Grund dafür, dass diese so gestaltet sind, wie sie sind, liegt darin, dass standardmäßig, wenn wir den View-Router in der App-Ansicht einrichten, ein gewisses Styling auf den unteren Bereich angewendet Wenn wir nach unten scrollen, haben wir unsere Nav-Links, die A-Elemente und auch eine andere Farbe für die Klasse der Router-Links exakt, aktiv Auf diese Weise können wir unseren aktiven Links sowohl für eine vollständige als auch für eine teilweise Übereinstimmung ein Design verleihen unseren aktiven Links sowohl für eine vollständige als auch für . 7. Fallback-Seiten: Es ist auch wichtig , darauf zu achten, was passiert, wenn der Benutzer im falschen Teil unserer App oder auf einer Seite landet , die nicht existiert Wenn wir zum Beispiel einfach etwas am Ende hinzugefügt haben, ist dieses Konto in Ordnung, weil wir innerhalb unserer Route zur Datei einen Abschnitt haben innerhalb unserer Route zur Datei einen Abschnitt , der alle variablen Informationen direkt nach unserem Konto behandelt . Wenn wir jedoch den gesamten Abschnitt durch etwas Zufälliges ersetzen, sehen wir in unserer Route of View keinen gerenderten Inhalt. Dafür können wir eine allgemeine Catch-All-Komponente einrichten , z. B. eine 44-Seite, die angezeigt wird, wenn keine anderen Routen übereinstimmen. Gehen wir dazu zu unseren Komponenten über und erstellen eine neue Datei namens Not Found of View. Dann ist ein einfacher Template-Insider hier in Ordnung, bei dem die Überschrift der Seite nicht gefunden wurde. Okay, um das in unserem Router zu verwenden, müssen wir es ganz oben in der Datei importieren. Import wurde nicht gefunden. Dies ist in Komponenten, die nicht gefunden wurden, enthalten. Dann werde ich am Ende unseres Route-Arrays ein neues Objekt erstellen, um das zu handhaben. Richten Sie das genauso ein wie das Objekt oben. Wir müssen einen Pfad einrichten, wie wir es immer tun. Aber darauf kommen wir gleich zurück. Wir fügen einen Namen hinzu, der nicht gefunden wurde, und dann rendern wir unsere Komponente. Wenn Sie in der Vergangenheit die Route einer zweiten Ansicht verwendet haben, konnten wir alle anderen Routen, die oben nicht übereinstimmen, einfach durch Hinzufügen eines Sternchens abfangen . Aber jetzt, wenn wir View-Version drei und die View-Route von vier verwenden, müssen wir stattdessen einen benutzerdefinierten Parameter verwenden. Wir machen das genau wie die dynamischen Segmente wir gerade oben hinzugefügt haben. Anstelle des Sterns fügen wir ein Forward und dann ein dynamisches Segment hinzu, das in der Variablen namens Pfadname erfasst wird. Dieser Name oder Pfadname kann beliebig sein, was Sie wählen. Der Unterschied zwischen View Router 2.3 besteht auch darin, dass wir jetzt einen regulären Ausdruck hinzufügen müssen, bei dem es sich um den Stern handelt. Und das entspricht jedem beliebigen Routennamen. Wenn wir nun eine URL eingeben , die von keiner anderen Route erkannt wird, sehen wir, dass unsere Seite nicht gefunden wurde. Lass uns noch einen versuchen. Das ist in Ordnung. Klicken Sie auf unsere anerkannten Links und es wird immer noch die richtige Komponente gerendert Wenn wir wollten, könnten wir auch auf jeden dieser eingegebenen Parameter zugreifen , z. B. auf diese Textzeichenfolge Und das können wir innerhalb der nicht gefundenen Komponente tun, genau wie wir zuvor darauf geachtet haben Wir können auf die Route mit dem Dollarsymbol zugreifen. Wir haben Zugriff auf unseren Pfadnamen , der derselbe Name ist, den wir im Router angegeben haben. Aber was wäre, wenn wir mehrere Segmente hätten? Wenn der Benutzer so etwas eingegeben hat? Wir können sehen, dass das Pam immer noch innerhalb der Vorlage ausgegeben Der Router zeigt dies jedoch als Textfolge und nicht als zwei separate Parameter an, wenn Sie sie in mehrere Werte aufteilen möchten, um Zugriff auf sie zu haben, wie in diesem Abschnitt und auch in diesem Abschnitt. Wir können stattdessen ein Array von Parametern erstellen, um dies einzurichten Springt zurück in unseren Router. Wir fügen einen zusätzlichen Start am Ende des Pfads hinzu. Wenn wir jetzt speichern und zurückgehen, haben wir statt einer Reihe von Parametern wie zuvor ein Array mit zwei separaten Werten. Dies gibt uns jetzt die Möglichkeit, diese Parameter bei Bedarf einzeln zu verwenden . Außerdem ist der View-Router sehr flexibel. Wir müssen nicht einfach eine einzige Seite haben, die nicht gefunden wurde. Wir könnten 44 Seiten für verschiedene falsche Segmente haben. Wenn dies beispielsweise admin war und das letzte Segment falsch war, möchten wir vielleicht eine andere 44-Seite für alle administrativen Fehler anzeigen . Der Weg, das zu tun, besteht darin, zurück zu unserem Äußeren zu gehen und diesen letzten Abschnitt, Pac oben, zu duplizieren. Wir könnten dann den Pfad Forward Admin wählen. Dann wird jeder unbekannte Abschnitt , der danach hinzugefügt wird, in seinem Parameter namens Pfadname gespeichert Oder Sie könnten dies auch umbenennen, um es aussagekräftiger zu gestalten, wenn Sie möchten. Aber die Idee hier ist einfach, dass der Pfadname nur dieses Segment speichert und nicht die vollständige URL, die wir zuvor hatten Wir könnten dann unsere Seite „Nicht gefunden“ genau an diese Route anpassen . Lassen Sie uns einfach dieses Beispiel von before go into entfernen, wir fügen es innerhalb des P-Elements und wir sagen, dass keine Admin-Seite gefunden wurde dann können wir unseren dynamischen Abschnitt ausgeben, wir sagen Dollarsymbol-Route. Dann können wir auf die Pfadeigenschaft zugreifen, bei der wir uns gerade befinden , bei der wir uns gerade . Unten steht unsere Fehlermeldung . Dies ist ein Beispiel dafür , wie wir eine einzelne Komponente mit 44 Seiten, die nicht gefunden wurden, erstellen können . Oder wir können auch spezifischer sein und diese Nachrichten an unsere spezielle Route anpassen . 8. Programmatische Navigation: Aber jetzt haben wir uns angesehen, wie wir über den Router-Link zwischen unseren Seiten oder Komponenten wechseln können über den Router-Link zwischen unseren Seiten oder Komponenten den Router-Link wird auf unserer Seite eine Schaltfläche platziert, auf die wir klicken können, um die gewünschte Komponente anzuzeigen. Es gibt aber auch andere Möglichkeiten, um innerhalb unserer App zwischen den Seiten zu wechseln . Wir können es auch programmgesteuert tun anstatt uns auf diese Schaltflächen zu verlassen Zuvor haben wir uns kurz mit dem Zugriff auf die Router-Instanz mithilfe des Dollarsymbol-Routers befasst dem Zugriff auf die Router-Instanz mithilfe des Dollarsymbol-Routers Darauf kann innerhalb unseres Skripts oder innerhalb unserer Vorlage zugegriffen werden Skripts oder innerhalb unserer Vorlage und es gibt uns Zugriff auf Dinge wie Parameter in unserem Code Dadurch werden auch viele andere Dinge offengelegt, wie zum Beispiel die Möglichkeit, mit Methoden wie Push zu navigieren Das bedeutet, dass wir die Navigation auch in Dinge wie unsere Methoden im Skript oder auch in beliebige Klick-Listener innerhalb unserer Vorlage einbauen Navigation auch in Dinge wie unsere Methoden im Skript oder auch in beliebige Klick-Listener innerhalb unserer Vorlage einbauen beliebige Klick-Listener innerhalb unserer Platzieren wir zum Beispiel eine Überschrift der ersten Ebene an einer beliebigen Stelle innerhalb unseres Wraps, ich sage einfach Seitentitel. Was wir hier tun können, ist auf einen Klick auf dieses Element zu warten , über das wir auf unseren Dollarsymbol-Router zugreifen können . Und eine Methode namens Push, die uns an einen gewünschten Ort bringt. Wenn das ein Titel ist, wäre es sinnvoll, vielleicht mit unserer Home-URL zu verknüpfen. Mal sehen, wie das im Browser funktioniert. Gehe zu einer anderen Seite. Es ist jetzt ein bisschen chaotisch, aber klicken Sie auf den Seitentitel. Dies bringt uns dann zurück zur Home-URL. Wir werden es noch einmal versuchen. Gehen Sie zum Benutzer, klicken Sie auf den Seitentitel und alles funktioniert einwandfrei. Außerdem können wir die Push-Methode und alle anderen Methoden verwenden , die wir uns unserem Skript ansehen werden. Und auch die Einrichtungsfunktion, wenn wir hier in unsere Benutzeransicht gehen , können wir auch auf Router-Push zugreifen und diese in unserem Skript verwenden. Wir werden das ausprobieren. Nehmen wir an, wir werden auf jede erstellte URL wie Test umsteigen Um das auszuprobieren, packen wir das dann innerhalb eines festgelegten Timeouts ab und übergeben jede Funktion, die nach 2 Sekunden ausgeführt wird Also können wir diesen Code ausschneiden und in unsere Auszeit einfügen. Gehen wir zur Seite und springen in die Benutzeransicht. Dann, 2 Sekunden später, wird unsere Funktion ausgeführt und wir werden zum Forward-Test gezwungen. Dieses Ding kann nützlich sein, um einen Benutzer nach dem Einloggen in den Zählerbereich zu schicken, da wir auch innerhalb unserer Methoden darauf zugreifen können. Lassen Sie uns nun dieses eingestellte Timeout entfernen und auch zu unserer App-Punktansicht zurückkehren , wo wir uns eine andere Methode namens replace ansehen können . Dieses ist das Puppensymbol. Ersetze dieses. Genau wie der Router-Push und alle anderen Methoden, die wir entdecken werden, auch innerhalb der Skriptkonfiguration verwendet werden können. wir mit einem sicheren Klick auf das Konto oder eine andere Seite im Seitentitel. Wie bei der Push-Methode wir auch hier wieder zur Home-URL zurückgeleitet. Das funktioniert sehr ähnlich wie die Push-Methode, aber es gibt einen Unterschied. Wenn Sie im Browser navigieren, wird jede der von uns besuchten Seiten zum vorherigen Verlauf der Einträge hinzugefügt Auf diese Weise können wir diese Zurück- und Vorwärtsschaltflächen im Browser verwenden diese Zurück- und Vorwärtsschaltflächen im Browser Der Unterschied zwischen diesen beiden Methoden besteht jedoch darin, dass bei Verwendung der Push-Methode alle diese Einträge weiterhin zum Verlauf des Browsers hinzugefügt werden . Wie es sich anhört, ersetzt die Methode replace jedoch den aktuellen Eintrag, anstatt zwei hinzuzufügen. Um das zu sagen, lassen Sie uns den Vorgang aktualisieren , um den Verlauf zu löschen. Klicken Sie auf das Konto. Klicken Sie nun auf den Seitentitel, um zur Startseite zurückzukehren. Wenn wir nun auf die Schaltfläche Zurück klicken, würden Sie erwarten, dass Sie wieder zum Konto weitergeleitet werden. tun wir nicht, weil dieser Ersatz die vorherige Route ersetzt und nicht zur Historie hinzugefügt hat . Wir können den Unterschied sehen. Wenn wir erneut auf Push klicken, aktualisieren, gehen wir zur Kontoseite klicken auf den Seitentitel. Wenn wir jedoch auf die Schaltfläche Zurück klicken, da der gesamte Verlauf im Browser gespeichert ist, wird dieser zur vorherigen Kontoseite zurückgeleitet. Eine andere Router-Methode, auf die wir Zugriff haben, ist, dass sie durch die Browsereinträge navigiert , so wie wir es gerade dort gelernt haben. Wenn wir verschiedene Seiten in unserer Anwendung durchgehen , werden alle diese Seiten der Reihe nach im Browserverlauf gespeichert . Wir können dann durch so viele dieser Verlaufseinträge zurück oder vorwärts navigieren , wie wir möchten. Wenn wir zu den Seiten zurückkehren möchten, können wir, wenn wir darauf klicken, Router do go verwenden einen Wert von minus zwei zu übergeben. Lass uns das ausprobieren. Wir kehren zur Heimatroute zurück. Wir gehen zum Benutzer, wir gehen zum Konto, wir gehen zum Profil. Jetzt, zwei Schritte rückwärts, wäre unser Benutzer, klickt auf den Seitentitel und wir kehren zur Benutzerroute zurück Wenn wir nur eine einzige Seite zurück oder vorwärts gehen würden. Es gibt auch zwei Methoden, die wir verwenden können: Zurück und Vorwärts haben Zugriff auf Forward, und dafür müssen keine Argumente übergeben werden. Wir müssen auch, wie Sie erwarten würden, , wenn wir den Verlauf löschen Privatkonto wechseln, wenn wir den Verlauf löschen. Dies führt uns einen Schritt zurück zum vorherigen Verlaufselement, dem Benutzer. Es sind auch andere Router-Methoden verfügbar. Wenn Sie mehr erfahren möchten , finden Sie weitere Informationen auf der Seite Router-Dokumentation anzeigen. Im Moment sind dies jedoch einige der gängigsten Methoden , die Sie in Ihrem Projekt verwenden können. 9. Vielen Dank: Herzlichen Glückwunsch, Sie haben jetzt das Ende dieses Kurses erreicht . Ich hoffe, Ihnen hat dieser Kurs gefallen und haben jetzt auch ein tieferes Verständnis das View-Router-Paket und dessen für das View-Router-Paket und dessen Möglichkeiten für Ihre View GS-Projekte. Wir wissen jetzt, dass Routing nicht immer so einfach ist, einfach auf einen Link zu klicken und zu einer neuen Seite weiterzuleiten Wir haben viele der View-Router-Pakete behandelt, Funktionen wie die Weitergabe von Informationen zwischen Routen Wir haben Abfragezeichenfolgen verwendet, wir haben Parameter verwendet. Wir haben dynamische Routen verwendet, um Variablen innerhalb unserer URLs verwenden zu können . Wir haben erklärt, wie man eine verschachtelte Navigation einrichtet, wie man Stile auf verschiedene Linkstatus anwendet und vieles mehr Also ein großes Dankeschön, dass ich mir die Zeit genommen habe , mir diesen Kurs anzusehen Ich hoffe, es hat dir gefallen und ich werde dich bald in einem anderen Kurs sehen.