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