Routing und Navigation

Routing und Navigation

0:00 Bisher hatten wir eine Seite. Heute werden daraus viele — jedenfalls für den Betrachter. Denn technisch bleibt es eine einzige Seite, und genau das ist der Trick, um den es in diesem Modul geht. Wir sehen uns an, wie der Router die Adresszeile mit der Anzeige verbindet, wie man zwischen Ansichten navigiert, wie variable Adressteile funktionieren und was das Ganze für den Webserver bedeutet.

0:22 Der letzte Punkt ist der, den man beim Deployment am häufigsten vergisst — und deshalb behandeln wir ihn gründlich.

Grundlagen von Single Page Applications

0:29 Beginnen wir mit dem Konzept. Was unterscheidet eine Single Page Application von einer klassischen Website, und was bringt der Router dabei eigentlich ein? Das ist keine akademische Frage — die Antwort erklärt, warum bestimmte Dinge plötzlich einfacher werden und andere plötzlich Ihre Aufgabe sind, obwohl sie früher der Browser erledigt hat.

0:48 Denn genau das ist der Handel, den man bei einer Single Page Application eingeht: mehr Kontrolle, dafür mehr Verantwortung. Der Unterschied in einem Bild: Bei einer klassischen Website holen Sie für jede Seite ein neues Dokument vom Server — wie wenn Sie in einem Katalog jedes Mal ein neues Heft aufschlagen. Bei einer Single Page Application bleibt das Heft dasselbe, und nur die Seiten darin werden ausgetauscht.

1:12 Der Router ist dabei das Inhaltsverzeichnis: Er bildet die Adresszeile auf die Komponente ab, die angezeigt werden soll. Ohne ihn wäre die Adresszeile bedeutungslos, und damit auch jedes Lesezeichen. Fünf Zeilen, und die zweite ist der eigentliche Gewinn: Der Zustand bleibt erhalten. Wenn jemand einen Filter gesetzt hat, ein Formular halb ausgefüllt hat oder in einer Liste weit nach unten gescrollt ist, überlebt das die Navigation.

1:37 Die vorletzte Zeile ist die Kehrseite: Die Adresszeile ist jetzt Ihre Verantwortung. Und die letzte Zeile nennt die Pflicht, die daraus folgt — der Zurück-Knopf muss weiterhin funktionieren. Das erledigt der Router für Sie, aber nur, wenn Sie ihn richtig verwenden. Man könnte ja auf die Idee kommen, die Ansicht einfach über eine Variable umzuschalten — eine Bedingung im Template, fertig.

2:00 Der dritte Punkt zeigt, warum das nicht reicht: Eine Adresse muss kopierbar sein und zur selben Ansicht führen. Wenn Ihre Anwendung dieselbe Adresse für alle Ansichten hat, kann niemand einen Link weitergeben, niemand ein Lesezeichen setzen, und Suchmaschinen sehen genau eine Seite. Der Router löst all das, indem er die Adresszeile zur Quelle der Wahrheit macht.

2:21 Der erste Punkt ist eine Ambivalenz, die man kennen sollte: Der erhaltene Zustand ist Vorteil und Fehlerquelle zugleich. Wenn Sie von einer Detailseite zu einer anderen wechseln, bleibt möglicherweise ein Filter stehen, den Sie längst vergessen haben. Der zweite Punkt greift dem letzten Kapitel vor und ist der, der beim Deployment zuschlägt: Ohne eine Regel auf dem Server ergibt der direkte Aufruf einer Unterseite einen Fehler.

2:45 Im Entwicklungsserver funktioniert alles — das macht es besonders tückisch.

Einrichtung des Vue-Routers

2:50 Jetzt zur Praxis. Der Router ist ein eigenes Paket, das create-vue auf Wunsch gleich mit einrichtet — wir haben in Modul 1 ja Ja gesagt. Die Einrichtung besteht aus drei Teilen, und die sehen wir uns der Reihe nach an. Danach können Sie jederzeit eine neue Seite ergänzen, und zwar in etwa zwei Minuten. Ich zeige Ihnen dabei auch eine Konvention, die zwei Sekunden kostet und Ihnen später einen halben Nachmittag spart.

3:15 Drei Bausteine: eine Historienstrategie, eine Liste von Routen und die Anmeldung als Plugin. Die Routenliste ist der interessante Teil — sie ist eine schlichte Tabelle, die Pfade auf Komponenten abbildet. Kein Magisches, keine Konvention über Dateinamen wie in manchen anderen Frameworks. Das hat den Vorteil, dass Sie an einer Stelle nachlesen können, welche Adressen es gibt.

3:38 In einem gewachsenen Projekt ist diese Datei oft das beste Inhaltsverzeichnis der ganzen Anwendung. Drei Routen, und die dritte verdient Aufmerksamkeit: die Auffangroute. Sie fängt alles ab, was auf keine der vorherigen passt — und sie muss deshalb zuletzt stehen, denn Vue Router prüft die Liste der Reihe nach. Stünde sie oben, würde sie alles verschlucken. Die zweite Zeile zeigt den Doppelpunkt für einen variablen Adressteil; darum geht es in Kapitel fünf ausführlich.

4:07 Und beachten Sie, wie unspektakulär die Konfiguration insgesamt ist: ein Objekt mit zwei Feldern. Zwei Zeilen im Einstiegspunkt, und das war es fast. Das zweite Puzzleteil steht in der Fußzeile: Im Template der Wurzelkomponente brauchen Sie ein Element, das markiert, wo die Ansicht erscheinen soll. Das vergisst man erstaunlich leicht, und das Symptom ist eine Seite, auf der die Navigation zu sehen ist, aber sonst nichts — ohne jede Fehlermeldung.

4:33 Wenn Ihre Routen also scheinbar nicht funktionieren, prüfen Sie zuerst, ob diese Stelle im Template vorhanden ist. Fünf Schritte, und Schritt drei ist der, den man gern überspringt: der Route einen Namen geben. Der Aufwand ist ein Wort, der Nutzen erheblich. Wenn Sie später den Pfad ändern — und das kommt vor, etwa aus Gründen der Suchmaschinenoptimierung —, müssen Sie ohne Namen jeden Link in der ganzen Anwendung anfassen.

4:58 Mit Namen ändern Sie eine Zeile. Schritt fünf ist der Nachweis, den ich Ihnen ans Herz lege: den direkten Aufruf prüfen, nicht nur die Navigation über einen Klick. Der erste Punkt ist der, den ich eben angesprochen habe, und er ist der häufigste in diesem Kapitel: ohne die Anzeigestelle im Template keine Ansicht, und keine Meldung.

5:18 Der zweite Punkt betrifft die Reihenfolge der Routen. Der dritte ist eine Feinheit der Pfadangabe: Ein Doppelpunkt-Parameter passt nur auf ein einzelnes Adresssegment. Wenn Sie einen Pfad mit Schrägstrichen abbilden wollen, brauchen Sie die erweiterte Schreibweise, wie sie in der Auffangroute steht.

Navigation zwischen Seiten

5:35 Jetzt zum Navigieren selbst. Es gibt zwei Wege — einen für das Template und einen für das Skript —, und die Frage, wann man welchen nimmt, ist schnell beantwortet. Wichtiger ist mir ein anderer Punkt: Warum der Weg über einen echten Link fast immer der richtige ist, auch wenn ein Klick-Handler technisch dasselbe erreichen würde.

5:53 Das ist eine dieser Entscheidungen, die niemandem auffallen, solange man sie richtig trifft — und die sehr auffallen, wenn nicht. Im Template nehmen Sie die Link-Komponente, die der Router mitbringt. Sie erzeugt ein echtes Verweis-Element und fängt den Klick ab, um die Seite nicht neu zu laden. Aus dem Skript heraus navigieren Sie über den Router selbst, den eine eigene Funktion liefert.

6:14 Der zweite Weg ist für Fälle, in denen die Navigation nicht direkt aus einem Klick folgt — etwa nach dem erfolgreichen Speichern eines Formulars oder nach einer Anmeldung. Oben der Weg aus dem Skript, unten der aus dem Template. Beide verwenden hier die benannte Route statt eines festen Pfads, und das ist die Empfehlung aus Kapitel zwei in der Praxis.

6:35 Sehen Sie sich an, was Sie dabei übergeben: den Namen und die Parameter als Objekt. Wenn sich der Pfad morgen ändert, funktioniert beides unverändert weiter. Das ist der ganze Zweck der Übung — und ein gutes Beispiel dafür, dass Konventionen sich erst später auszahlen. Zwei Funktionen, deren Namen sich um genau einen Buchstaben unterscheiden — und das führt zuverlässig zu Verwechslungen.

6:59 Die Merkhilfe ist die zweite Zeile: Eines navigiert, das andere liest. Wenn Sie irgendwohin wollen, brauchen Sie den Router. Wenn Sie wissen wollen, wo Sie sind, brauchen Sie die Route. Die letzte Zeile ist wichtig: Die aktuelle Route ist ein reaktives Objekt. Sie können also darauf beobachten und reagieren, wenn sich etwas ändert — dazu in Kapitel fünf mehr.

7:22 Hier ist der Punkt, den ich angekündigt habe, und er ist mir wichtig. Ein Verweis-Element ist mehr als ein anklickbarer Bereich: Man kann es mit der mittleren Maustaste in einem neuen Tab öffnen, man kann die Adresse kopieren, Hilfstechnologien erkennen es als Link, und Suchmaschinen folgen ihm. Ein Bereich mit Klick-Handler kann nichts davon.

7:41 Der letzte Punkt ist ein praktischer Zusatznutzen: Der Router setzt automatisch Klassen, wenn ein Link zur aktuellen Ansicht gehört. Damit ist die Navigationsgestaltung fast geschenkt. Der zweite Punkt ist eine Entscheidung, die man bewusst treffen sollte: Der eine Weg legt einen Eintrag in der Browserhistorie an, der andere ersetzt den aktuellen.

8:02 Nach einer Anmeldung wollen Sie meist ersetzen — sonst landet der Nutzer mit dem Zurück-Knopf wieder auf dem Anmeldeformular. Der dritte Punkt ist eine Falle, die stumm scheitert: Ein Zielobjekt mit einem festen Pfad ignoriert mitgegebene Parameter. Entweder Pfad oder Name plus Parameter — mischen funktioniert nicht.

Aktive Navigationselemente stylen

8:20 Ein sehr kurzes, sehr praktisches Kapitel. Fast jede Anwendung will zeigen, wo man gerade ist — die aktive Seite in der Navigation hervorheben. Der Router nimmt Ihnen dabei die ganze Arbeit ab: Sie müssen nichts vergleichen und nichts umschalten, sondern nur zwei Klassennamen kennen und je eine CSS-Regel schreiben. Der Unterschied zwischen den beiden Klassen ist dabei genau das, was man bei verschachtelten Navigationen braucht — und was man ohne diese Hilfe von Hand nachbauen müsste.

8:47 Zwei Klassen werden automatisch gesetzt, und der Unterschied zwischen ihnen ist der ganze Inhalt dieses Kapitels. Die eine greift, wenn die Route zum Link passt — und zwar einschließlich übergeordneter Routen. Die andere nur bei exakter Übereinstimmung. Diese Unterscheidung ist genau das, was man bei verschachtelten Navigationen braucht: Der Oberpunkt soll ja markiert bleiben, wenn man auf einer Unterseite ist, aber vielleicht anders als der Unterpunkt selbst.

9:14 Zwei Zeilen, und das Beispiel in der Fußzeile macht es konkret: Auf einer Detailseite trägt der Link zur Übersicht die erste Klasse, aber nicht die zweite. Wenn Sie also in einer Hauptnavigation den Bereich hervorheben wollen, nehmen Sie die erste. Wenn Sie in einer Unterliste genau den einen Eintrag markieren wollen, nehmen Sie die zweite.

9:33 Das deckt praktisch alle Fälle ab, die im Alltag vorkommen — ohne dass Sie eine einzige Zeile Vergleichslogik schreiben. Vier Zeilen, und sie zeigen zwei Wege. Der erste ist der Normalfall: Sie schreiben einfach eine CSS-Regel auf den vorgegebenen Klassennamen. Der zweite ist die Anpassung an ein bestehendes Gestaltungssystem — dann geben Sie am Link Ihren eigenen Klassennamen an.

9:55 Und wenn Sie das anwendungsweit umstellen wollen, geht das auch in der Router-Konfiguration. Achten Sie darauf, was in der Fußzeile steht: Eine eigene Klasse ersetzt die Vorgabe, sie kommt nicht zusätzlich. Der erste Punkt ist der, der in fast jeder Navigation einmal auftritt: Der Link auf die Startseite trägt die aktive Klasse auf beinahe jeder Seite.

10:16 Der Grund ist logisch — jeder Pfad beginnt mit einem Schrägstrich, also ist die Startseite immer eine übergeordnete Route. Die Lösung ist, dort die exakte Variante zu verwenden. Der zweite Punkt ist ein Hinweis für die Fehlersuche: Die Klassen entstehen zur Laufzeit und stehen nicht im ausgelieferten Quelltext. Sehen Sie also in den Entwicklerwerkzeugen nach, nicht in der Seitenquelle.

Arbeiten mit Routenparametern

10:39 Jetzt wird es interessanter: variable Teile der Adresse. Jede Detailseite braucht das — die Adresse muss ja sagen, welcher Artikel gemeint ist. Der Mechanismus ist einfach, aber es gibt eine Eigenheit, über die wirklich jeder einmal stolpert: Wenn Sie von einem Artikel zum nächsten wechseln, passiert weniger, als Sie denken.

10:58 Das sehen wir uns genau an — denn der daraus folgende Fehler ist einer, den man beim Testen mit einem einzigen Datensatz garantiert übersieht. Ein Doppelpunkt im Pfad macht ein Segment variabel, und der Wert steht danach in einem Objekt zur Verfügung. Davon zu unterscheiden ist die Abfragezeichenfolge nach dem Fragezeichen — die braucht keine Deklaration und steht in einem eigenen Objekt.

11:21 Die Faustregel für die Wahl: Was die Ressource identifiziert, gehört in den Pfad. Was die Darstellung beeinflusst — Sortierung, Filter, Seitenzahl — gehört in die Abfragezeichenfolge. Das ist eine Konvention, aber eine sehr etablierte. Sehen Sie sich die letzten beiden Zeilen an, denn dort steckt die Eigenheit, die ich angekündigt habe. Der erste Aufruf lädt beim ersten Öffnen.

11:45 Der zweite reagiert auf einen Wechsel des Parameters. Und beide brauchen Sie wirklich — lassen Sie den zweiten weg, dann bleibt beim Wechsel von Artikel sieben zu Artikel acht der alte Inhalt stehen. Die Adresse ändert sich, die Anzeige nicht. Ein Fehler, der beim Testen mit nur einem Datensatz nie auffällt. Hier ist die Erklärung. Wenn Sie zu einer Adresse navigieren, die auf dieselbe Komponente führt, baut der Router sie nicht neu — er verwendet die vorhandene Instanz weiter.

12:14 Das ist gewollt und sinnvoll: Es spart das Neuaufbauen der ganzen Ansicht, und es hält Scrollposition und Zustand. Die Folge ist aber, dass die Einhänge-Funktion kein zweites Mal läuft. Wer sein Laden nur dort untergebracht hat, hat also einen Ladevorgang, der genau einmal passiert. Die Lösung ist ein Beobachter oder der Navigationswächter.

12:34 Vier Zeilen Gegenüberstellung, und die dritte gilt für beide gleich: Sie bekommen immer Zeichenketten. Auch wenn in der Adresse eine Sieben steht, kommt bei Ihnen eine Zeichenkette an. Das ist die Ursache für einen Fehler, den jeder einmal hat: Ein Vergleich mit einer Zahl schlägt fehl, und man sucht lange. Die vierte Zeile ist die inhaltliche Empfehlung von vorhin: Identität in den Pfad, Darstellungsoptionen in die Abfragezeichenfolge.

13:00 Der erste Punkt ist der eben genannte, und ich betone ihn, weil er so häufig ist: Parameter sind Zeichenketten. Wandeln Sie um, bevor Sie vergleichen oder rechnen — am besten an einer einzigen Stelle. Der letzte Punkt ist eine wichtige Ergänzung zu Folie 26: Beim ersten Aufruf läuft der Navigationswächter nicht. Er reagiert ja auf eine Aktualisierung, und beim ersten Öffnen gibt es keine. Sie brauchen deshalb beides — das direkte Laden und die Reaktion auf spätere Wechsel.

Übergabe von Parametern als Props

13:30 Und jetzt eine Verbesserung, die viele nicht kennen: Sie können die Parameter als gewöhnliche Eingaben in die Komponente geben, statt sie dort selbst aus dem Router zu holen. Das klingt nach einem Umweg und ist in Wahrheit eine Entkopplung — die Komponente braucht danach den Router überhaupt nicht mehr zu kennen. Ich zeige Ihnen die vier Formen und warum sich das lohnt.

13:50 Die Idee ist schlicht: Der Router reicht die Parameter als Eingaben in die Komponente. Was daraus folgt, ist der eigentliche Gewinn — die Komponente ist danach eine ganz gewöhnliche Komponente. Sie hat keine Abhängigkeit zum Router mehr, sie lässt sich in einem Dialog verwenden, sie lässt sich testen, indem man ihr einfach einen Wert übergibt.

14:09 Das ist derselbe Gedanke wie in Modul 2 bei den wiederverwendbaren Komponenten: Eine Komponente, die ihren Kontext nicht kennt, ist beweglicher. Drei der vier Formen sehen Sie hier. Die erste ist der Normalfall — einfach alles durchreichen. Die zweite setzt feste Werte, was für Varianten derselben Ansicht praktisch ist.

14:29 Die dritte ist die mächtigste: eine Funktion, die aus der Route baut, was die Komponente braucht. Und das ist zugleich der Ort, den die Fußzeile nennt: Hier wandeln Sie die Zeichenkette in eine Zahl um. Einmal, an einer definierten Stelle — statt in jeder Komponente aufs Neue. Vier Zeilen, und die letzte ist ein Ausblick auf etwas, das wir nicht vertiefen: Eine Route kann mehrere benannte Anzeigebereiche haben, etwa für ein Layout mit Seitenleiste.

14:56 Dann wird die Angabe zu einem Objekt je Bereich. Das brauchen Sie selten, aber es ist gut zu wissen, dass es geht. Für den Alltag sind die ersten drei Zeilen relevant, und davon werden Sie die erste und die dritte am häufigsten verwenden. Der zweite Punkt ist der praktisch wichtigste: Die Komponente lässt sich in einem Test mit einfachen Werten aufrufen.

15:17 Ohne diese Entkopplung müssten Sie im Test einen Router aufsetzen, eine Route registrieren und dorthin navigieren — nur um zu prüfen, ob die Komponente eine Zahl richtig anzeigt. Der dritte Punkt ist der, der im Alltag am häufigsten überrascht: Dieselbe Ansicht funktioniert plötzlich auch in einem Dialog, ohne eine eigene Route zu haben.

15:36 Diese Aufgabe hat ein sehr klares Erfolgskriterium: Die Komponente enthält keinen Router-Import mehr. Das ist gut prüfbar — schauen Sie einfach in die Importzeilen. Der zweite Teil ist der eigentliche Nachweis: Sie können die Komponente außerhalb einer Route rendern, indem Sie ihr einen Wert übergeben. Probieren Sie das ruhig aus, es ist der Moment, in dem der Nutzen der Entkopplung greifbar wird.

15:59 Der Hinweis unten sagt, wo die Umwandlung in eine Zahl hingehört: in die Funktionsform, nicht in die Komponente. Der erste Punkt ist eine Einschränkung, die überrascht: Die einfache Form reicht nur die Pfadparameter durch, nicht die Abfragezeichenfolge. Wenn Sie beides brauchen, führt kein Weg an der Funktionsform vorbei.

16:18 Der dritte Punkt ist ein Hinweis zur Sorgfalt: Die Funktionsform läuft bei jeder Navigation, sie sollte also frei von Nebenwirkungen sein. Und der letzte Punkt ist eine Warnung vor der Mischung: Wer Eingaben verwendet und zusätzlich direkt aus dem Router liest, hat zwei Quellen für denselben Wert.

Konfiguration des Router History Mode

16:35 Zum Abschluss der Teil, der über die Anwendung hinausreicht. Wie die Adressen Ihrer Anwendung aussehen, ist eine Entscheidung — und eine davon hat Folgen für den Webserver. Ich zeige Ihnen die drei Möglichkeiten, die praktische Konsequenz und die Serverregel, die Sie brauchen. Das ist der Punkt, an dem beim ersten Deployment die meisten Anwendungen scheitern — und zwar auf eine besonders ärgerliche Art, weil vorher lokal alles funktioniert hat.

17:01 Drei Strategien. Die erste erzeugt saubere Adressen über die History-Schnittstelle des Browsers — das ist die, die Sie wollen. Die zweite arbeitet mit einem Rautezeichen und braucht keine Serverkonfiguration, hat dafür aber Nachteile bei Suchmaschinen. Die dritte hält die Adresse nur im Speicher und ist für Tests und serverseitiges Rendern gedacht.

17:21 Für eine normale Webanwendung ist die erste richtig — und dann gehört die Serverregel dazu, über die wir gleich sprechen. Drei Zeilen, und die mittlere Spalte zeigt den sichtbaren Unterschied. Das Rautezeichen in der Adresse wirkt technisch und ist es auch: Alles nach der Raute schickt der Browser gar nicht erst zum Server, weshalb es dort keine Konfiguration braucht.

17:42 Genau deshalb sehen Suchmaschinen dort aber auch nur eine einzige Seite. Die Fußzeile sagt es deutlich: Das ist die Notlösung, nicht die Empfehlung. Nehmen Sie sie nur, wenn Sie den Server wirklich nicht anfassen können. Drei Zeilen Konfiguration, und sie lösen das gesamte Problem. Die Logik ist einfach und wichtig zu verstehen: Zuerst wird geprüft, ob es die angeforderte Datei wirklich gibt — dann wird sie ausgeliefert.

18:07 Nur wenn nicht, kommt die Hauptdatei zum Zug. Diese Reihenfolge ist entscheidend, denn sonst würden auch Ihre JavaScript- und Bilddateien durch die Regel laufen und HTML zurückgeben. Bei Apache erreicht man dasselbe mit zwei Bedingungen auf Datei und Verzeichnis. Hier die Erklärung Schritt für Schritt. Wenn jemand eine Detailadresse direkt in die Adresszeile tippt oder ein Lesezeichen öffnet, fragt der Browser genau diesen Pfad beim Server an.

18:33 Auf dem Server gibt es dort keine Datei — Ihre Anwendung ist ja eine einzige Hauptdatei plus Bündel. Also antwortet er mit einem Fehler. Die Regel sagt ihm: Liefere in diesem Fall die Hauptdatei aus. Danach übernimmt der Router im Browser und zeigt die richtige Ansicht. Der letzte Punkt ist die Pointe: Beim Navigieren funktioniert alles, nur beim Neuladen nicht.

18:55 Der erste Punkt ist die Folge, an die man nicht denkt: Nach der Regel meldet der Server nie mehr einen Nicht-gefunden-Fehler. Jede erfundene Adresse liefert Ihre Anwendung aus. Damit wird die Auffangroute in der Anwendung zur Pflicht — sonst sieht der Nutzer eine leere Seite statt einer Fehlerseite. Der zweite Punkt ist der, der weh tut: Im Entwicklungsserver funktioniert alles, der Fehler zeigt sich erst nach dem Deployment. Prüfen Sie es also dort, wo es zählt.

Navigation steht

19:22 Fassen wir zusammen. Die Adresszeile ist die Wahrheit, und der Router bildet sie auf Komponenten ab — deshalb sind benannte Routen und echte Links so wichtig. Zum Navigieren nehmen Sie die Link-Komponente im Template und den Router im Skript. Parameter kommen als Zeichenketten und gehören am besten als Eingaben in die Komponente.

19:41 Und saubere Adressen brauchen eine Auffangregel auf dem Server. Im nächsten Modul holen wir uns endlich echte Daten: Es geht um die Anbindung eines Backends.