VueJS - Routing: Ein Anfängerleitfaden zum Navigieren in Ihrer Vue-App

Hallo da draußen, zukünftige Vue-Meister! Heute begeben wir uns auf eine aufregende Reise durch die Welt des Vue-Routings. Stellen Sie sich das Routing als das GPS Ihrer Vue-Anwendung vor - es hilft Ihren Benutzern, von einer Seite zur anderen zu navigieren, ohne die gesamte Website neu zu laden. Cool, oder? Lassen Sie uns eintauchen!

Was ist Vue Routing?

Stellen Sie sich vor, Sie bauen ein Haus (Ihre Vue-App). Sie wollten nicht, dass Ihre Gäste jedes Mal durch das Fenster hereingehen, wenn sie in einen anderen Raum möchten, oder? Genau hier kommt das Routing ins Spiel - es ist so, als ob Sie richtige Türen zwischen den Räumen Ihrer App erstellen.

Vue Router ist die offizielle Routing-Bibliothek für Vue.js. Es ermöglicht Ihnen, Komponenten auf verschiedene URL-Pfade zu mappen und eine reibungslose, einseitige Anwendungerfahrung zu schaffen.

Einrichtung des Vue Router

Zuerst einmal, installieren wir den Vue Router. Öffnen Sie Ihr Terminal und führen Sie aus:

npm install vue-router

Nun erstellen wir eine grundlegende Router-Konfiguration:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]

const router = new VueRouter({
routes
})

export default router

In dieser Konfiguration importieren wir Vue und VueRouter, dann sagen wir Vue, dass es VueRouter verwenden soll. Wir definieren unsere Pfade in einem Array, wobei jeder Pfad ein Objekt ist, das den Pfad, den Namen und die anzuzeigende Komponente angibt.

Verwendung von Router-Link und Router-View

Nun, da wir unsere Pfade eingerichtet haben, wie verwenden wir sie? Hier kommen <router-link> und <router-view> ins Spiel.

Router-Link

<router-link> ist ein Komponente, die es Benutzern ermöglicht, zwischen Seiten zu navigieren. Es ist wie ein aufgeladener <a>-Tag. So verwenden Sie es:

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">Über uns</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> ist der Ort, an dem die Magie passiert. Es ist eine Komponente, die den Inhalt der Route anzeigt, die mit der aktuellen URL übereinstimmt. Denken Sie daran als Platzhalter, an dem Ihre Komponenten gerendert werden.

Props für Router-Link

<router-link> bringt mehrere Props mit, die es Ihnen ermöglichen, sein Verhalten anzupassen. Sehen wir uns einige der häufigsten an:

Prop	Beschreibung	Beispiel
to	Gibt den Zielroute an	<router-link to="/about">Über uns</router-link>
replace	Navigiert ohne einen neuen Verlaufsseintrag hinzuzufügen	<router-link to="/about" replace>Über uns</router-link>
append	Fügt den Pfad zum aktuellen Pfad hinzu	<router-link to="child" append>Kind</router-link>
tag	Gibt an, welchen Tag die Komponente rendern soll	<router-link to="/about" tag="li">Über uns</router-link>
active-class	Klasse, die angewendet wird, wenn der Link aktiv ist	<router-link to="/about" active-class="aktiv">Über uns</router-link>
exact	Passen exakt zur Route an	<router-link to="/" exact>Startseite</router-link>

Programmatische Navigation

Manchmal möchten Sie möglicherweise aus Ihrem JavaScript-Code navigieren. Vue Router bietet Methoden dafür:

// Gehe zur Über-uns-Seite
this.$router.push('/about')

// Gehe zurück
this.$router.go(-1)

// Ersetze aktuellen Verlaufsseintrag
this.$router.replace('/about')

Dynamische Route-Anpassung

Oft müssen wir Pfade mit demselben Komponenten aber unterschiedlichen Parametern mappen. Zum Beispiel eine Benutzerprofilseite, bei der die Benutzer-ID Teil der URL ist. Wir können dies mit dynamischen Segmenten im Pfad erreichen:

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

In diesem Beispiel ist :id das dynamische Segment. Sie können darauf in Ihrer Komponente über this.$route.params.id zugreifen.

Geschachtelte Routes

Wenn Ihre App wächst, möchten Sie möglicherweise Komponenten innerhalbanderer Komponenten einbetten. Vue Router macht dies einfach:

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

Diese Konfiguration ermöglicht URLs wie /user/123/profile und /user/123/posts.

Navigations-Guards

Last but not least, sprechen wir über Navigations-Guards. Dies sind Hooks, die vom Vue Router bereitgestellt werden, um Navigationen durch Umleitung oder Abbruch zu schützen. Sie sind wie die Türsteher Ihrer App, die kontrollieren, wer hereinkommt und wer nicht.

Hier ist ein einfaches Beispiel eines globalen before-Guard:

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

Dieser Guard überprüft, ob der Benutzer authentifiziert ist, bevor er die Navigation zu jeder Route andere als 'Login' ermöglicht.

Und das war's, Leute! Wir haben die Grundlagen des Vue-Routings von der Einrichtung der Pfade bis hin zu deren Absicherung durchlaufen. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Konzepte in Ihren eigenen Projekten auszuprobieren. Viel Spaß beim Programmieren und möge Ihre Routen Sieimmer dorthin führen, wo Sie hin möchten!

Credits: Image by storyset