Kontakt aufnehmen

Vue Routing

Als vollwertiges Frontend-Framework für die Entwicklung von Single Page Applications ermöglicht Vue.js auch das Routing. Damit können wir einen Bereich unserer Html-Seite als View-Container festlegen. Der Vue-router lädt je nach aktueller Url die entsprechende Vue-Komponente in diesen Container.

Vue-Router installieren

Vue-Router ist zwar ein offizielles Vue-Modul, gehört aber nicht zum Core-Modul einer Vue-Installtion. Es empfiehlt sich, das vue-router Modul per NPM zu installieren indem wir es zu unseren devDependencies in der package.json hinzufügen.

devDependencies": {
    "vue-router": "^3.0.2",
    ....
}
    

Mit npm install --save-dev wird es installiert.

Vue-Router konfigurieren

Wenn das Modul einmal in die HTML-Seite eingebunden wurde, lässt es sich instanzieren und die ersten Routen definieren.

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/home',
            name: 'home',
            component: HomeComponent
        },
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/settings',
            name: 'settings',
            component: SettingsComponent
        }
});
        
Hiermit hätten wir bereits drei Routen definiert. Zwei der Routen haben eine eigene Vue-Komponente und die Route zum Url-Pfad "/" ist eine einfache Weiterleitung auf die Route "home". Die Definition "history" für mode stellt sicher, dass wir auch mit den Vor-und Zurück-Buttons des Browsers zwischen den aufgerufenen Views hin und her navigieren können.

Router-Links und Router-View

Mit dem ‹router-link›-Element gibt es eine einfache Möglichkeit, Links zu definieren, die über den Vue-Router abgehandelt werden sollen.

‹router-link :to="{ name: 'settings' }"›‹/router-link›

Als nächstes muss noch ein Bereich im HTML gewählt werden, in den Vue je nach aktiver Route die entsprechende Vue-Komponente geladen werden soll. Dazu fügen wir einfach das folgende Element ein:

‹router-view›‹/router-view›
Ab jetzt werden alle Vue-Routen standardmäßig in diesem Container gerendert.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Karriere bei a coding project - Wir freuen uns auf dich!

Alle unsere Stellen sind Remote oder an unseren Standorten in Münster und Wuppertal verfügbar:

// Warum Du Dich für uns entscheiden solltest

  • Regelmäßig neue Projekte, die Du von Grund an mit planen und aufbauen kannst
  • Arbeit in einem wachsenden IT-Unternehmen
  • Wöchentliche Vorträge: Jeden Freitag hält ein Mitarbeiter einen Vortrag über ein Fachthema seiner Wahl
Jetzt bewerben

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern