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.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project