Vue - Routing

Mit Vue erstellt man oft sogenannte Single Page Applications. D.h. alle Ansichten (Views) sind technisch gesehen auf einer HTML-Seite.

Auch wenn ich zwischen Komponenten oder Ansichten wechlse bleibt daher die URL der Seite immer gleich. Wenn man den Link teilt, landert der User immer auf der Startseite.

Mit dem Routing von Vue kann man für Views eigene URLs zur Verfügung stellen. So dass jede Ansicht der App mit einer eigenen URL repräsentiert werden kann.

Routing in Vue funktioniert mit dem vue-router. Dies ist ein zusätzliches Package des Entwickler Teams, das zunächst in Deinem Projekt installiert werden muss:

npm install --save vue-router

Wenn es später "not found" compiler warnings gibt versuche:

npm install --save vue-router@next

Router und Routes registrieren

Ein Router läßt sich so erzeugen: main.js

//import { createRouter } from 'vue-router'; // without history
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter();

In der app läßt er sich mit use nutzen:

app.use(router)

wobei app eine Vue Instanz ist.

Zusätzlich zum router haben wir noch das createWebHistory importiert. Damit kann Vue die BrowserHistory auslesen.

Der Router benötigt eine Konfiguration in der wir zumindest die history und die routes bestimmen:

const router = createRouter({
    history: createWebHistory(), // we use built in browser support
    routes: []
});

Das routes array bekommt später alle Routes die wir nutzen möchten.

Ziel ist im Prinzip eine eigene URL für bestimmte Components zu generieren. Eine Route benötigt also zumindest ein paar Informationen

• einen Pfad (path) für die URL
• eine Komponente die gerendert werden soll
• eine Information an welcher Stelle des Views die Komponente gerendert werden soll.

Pfad und Komponente lassen sich in der routes Konfiguration angeben. Damit sind unser main.js Code jetzt so aus:

main.js

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter({
    history: createWebHistory(), // we use built in browser support
    routes: [
        { path: '/teams', component: TeamsList },
        { path: '/users', component: UsersList }
    ]
});
const app = createApp(App)
app.use(router);

app.mount('#app');

<router-view>

Nun fehlt noch die Ansicht und die Information wo diese gerendert werden soll. Ohne Routing macht man Ansichten oft über dynamische Komponenten und den <component> Tag.

<component :is="activePage"></component>

Der vue-router stellt eine eigene component für diesen Zweck zur Verfügung der anstelle verwendet werden kann den router-view:

<router-view></router-view>

Damit ändert sich auch einiges am Code der Komponente. Die in main.js importierten und in routes registrierten Komponenten stehen automatisch zur Verfügung und müssen nicht mehr global oder lokal importiert und auch nicht mehr registriert werden. App.vue

<template>
  <the-navigation @set-page="setActivePage"></the-navigation>
  <main>
    <router-view></router-view>
  </main>
</template>

Wenn wir jetzt die Seite mit

myDomain.de/teams

aufrufen wird an der Stelle von router-view die Komponente TeamsList.vue gerendert.

Navigation <router-link>

Wenn wir eine Navigation in der Seite haben muss diese ebenfalls anders arbeiten. Klassischerweise hat man eine Property z.b. active Page, die man über buttons o.ä. setzt und darüber eine dynamische <component> steuert. Mit dabei sind dann oftmals custom events um über mehrere Komponenten hinweg die Variable zu setzen und methods ...

Mit dem router können wir theoretisch einfach Links setzen, vue-router hat aber eine spezielle Komponente die wir einfach einsetzen können.

<template>
  <header>
    <nav>
      <ul>
        <li>
          <router-link to="/teams">Teams</router-link>
        </li>
        <li>
         <router-link to="/users">Users</router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

Zusätzlich liefert router-links auch noch die Klassen router-link-active und router-link-exact-active die man für das Styling nutzen kann. Die Klassennamen lassen sich auch im router-Konfigurationsobjekt anpassen. Z.B

linkActiveClass: 'active'

Dynamische Links

Für das to Argument können wir auch v-bind nutzen. So kann man es an Properties binden:

<router-link :to="'/teams/' + id">Members</router-link>

Programmatic routing / $router

Über das $router special property kann man auch über den Programmcode navigieren:

this.$router.push('/teams');
//this.$router.back;
//this.$router.forward;

Dynamic routing - $route

In der Praxis möchte man Pfadsegmente oft dynamisch gestalten. Also z.b. die ID eines Datensatzes nutzen der dann angezeigt werden soll

https:/meineDomain.de/teams/team-xyz

Hier soll z.B. das Team mit der ID team-xyz angezeigt werden.

Dynamic Route definieren

In der Routing Konfiguration gibt man dafür eine dynamic route mit einem route parameter an.

 { path: '/teams/:teamId', component: TeamMembers },

Mit dem Doppelpunkt wird der Parameter gekennzeichnet. Wenn auf der gleichen Ebene noch ein weiteres nicht-dynamischen Segement verwendet wird muss das vor dem dynamischen stehen.

 { path: '/teams/new', component: NewMember },
 { path: '/teams/:teamId', component: TeamMembers },

Dynamic Route einsetzen Wir gehen davon aus dass wir in App.vue Daten in dieser Art haben:

 teams: [
        { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
        { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
        { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
      ],

Diese werden provided, so dass wir sie in einer Kindkomponente injecten können:

provide() {
    return {
      teams: this.teams,
    };
  },

TeamMembers.vue Hier sollen die Daten angezeigt werden. Damit die Daten zur Verfügung stehen injecten wir:

  inject: ['teams'],

Als nächstes müssen wir herausfinden welches Segement in der URL steht. Das können wir über einen Hook machen.

created(){}

wird ausgeführt, nachdem die Komponente erzeugt wurde, aber bevor sie gerendert wird.

Im Hook können wir über das $route Objekt auf die aktuelle route zugreifen.

console.log($this.route); // shows all route things in the console
this.$route.path; // /teams/t1
this.$route.params.teamId; //t1

In Kombination mit <router-link> und einem v-bind für das to Argument kann man so auch eine passende Navigation erzeugen:

<router-link :to="'/teams/' + id">Members</router-link>

Ein Problem mit <router-link> Wenn du auf einen dynamischen Link gewechselt hast z.B. auf

myDomain.de/teams/t3

und von dort über einen Link

<router-link to="/teams/t2">Klick mich</router-link> 

wechseln möchtest funktioniert dies hier nicht. Das liegt daran, dass wir den Parameter /t2 bzw. teamId im created() Hook verarbeiten. Dieser wird aber nur beim ersten mal wenn die Komponente erstellt wird aufgerufen. Da wir schon in der Komponente sind passiert das nicht erneut und der View wird nicht aktualisiert.

Lösung: Ein watcher

Zwar wird created() nicht aufgerufen aber das $route Objekt ändert sich sehr wohl. Daher können wir einfach einen Watcher einsetzen, der bei Änderungen des router Objekts anspricht:

 watch: {
    $route(newRoute){
      this.loadTeamMembers(newRoute);
    }
  }

Zusätzlich bauen wir eine Funktion loadTeamMembers() die wir in methods unterbringen, damit wir den Code nicht mehrmals verwenden müssen (siehe finaler Code unten). Im Watcher können wir die Funktion einfach aufrufen wen das $route Objekt sich ändert.

route Parameter als prop

Der Ansatz oben hat einen Nachteil: Bisher wird die Komponente nur über einen Aufruf einer bestimmten URL gerendert. Wenn sie als Teil einer Parent-Komponente gerendert wird funktioniert das nicht. Hier wäre es schöner eine Property nutzen zu können. Statt über this.§route könnten wir dann über this.teamId darauf zugreifen.

Das ist einfach möglich indem wir in der route Definition den Parameter props: true hinzufügen.

props: true

Er sorgt dafür, dass das Pfad-Segement in den props der Komponente zur Verfügung steht:

props: ['teamId'],

Auf diese Weise wird die Component vielseitiger einsetzbar und wird etwas einfacher.

redirect, alias

In der Router Konfiguration kann man auch Redirects einsetzen. Zum Beispiel um die Rootseite, die im Moment leer ist (bis auf die Navigation), auf die Teams-Liste zu leiten:

{ path: '/', redirect: '/teams'},

Dies sollte vor der redirect definition stehen.

Alternativ kann man in der TeamsList Component die Route Seite als Alias. Hierbei bleibt die URL die Selbe aber der Inhalt der Teamsliste wird angezeigt:

{ path: '/teams', component: TeamsList, alias: '/' },

catch all

Zu guter Letzt möchten wir alle urls abfangen die nicht gehandelt sind. Das kann man mit einem catch all machen. Vue aktzeptiert in der Router Konfiguration auch dynamische Parameter mit Regex Ausdrücken. Daher können wir schreiben

{ path: '/:notFound(.*)', component: NotFound}, //.* is regex for any characters
//{ path: '/:notFound(.*)', redirect: '/teams'}, // redirect would be possible too

Das notFound kann auch einen anderen Namen bekommen. Wichtig ist dass wir hier eine Funktion an das path Objekt übergeben an die wir einen regulären Ausdruck übergeben. Diese Route sollte ganz am Ende stehen sonst würde sie die nachfolgenden Überschreiben.