Kapitel 27: Vue Router Grundlagen

📙 Lernziel: Vue Router installieren und Grundlagen verstehen!

---

27.1 Was ist Vue Router?

Vue Router ist die offizielle Routing-Bibliothek für Vue.js.

Funktionen:

• ✅ Single Page Application (SPA) Routing
• ✅ Verschiedene URLs zeigen verschiedene Komponenten
• ✅ Browser-Historie verwalten
• ✅ Lazy Loading von Komponenten

Beispiel-Szenario:

/              → Home.vue
/about         → About.vue
/contact       → Contact.vue
/user/:id       → User.vue (dynamisch)

---

27.2 Vue Router installieren

Installation:

# Mit pnpm (empfohlen)
pnpm add vue-router@4

# Mit npm
npm install vue-router@4

# Mit yarn
yarn add vue-router@4

Überprüfung (package.json):

{
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.3.0"
  }
}

---

27.3 Router konfigurieren

Schritt 1: Router-Datei erstellen (src/router/index.js)

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Schritt 2: Router in main.js einbinden

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)  // Router registrieren
  .mount('#app')

Schritt 3: <router-view> in App.vue hinzufügen

<!-- src/App.vue -->
<script setup>
// Keine Importe nötig (Router ist global verfügbar)
</script>

<template>
  <div>
    <h1>Meine Vue App</h1>
    
    <!-- Navigation -->
    <nav>
      <router-link to="/">Start</router-link> |
      <router-link to="/about">Über uns</router-link> |
      <router-link to="/contact">Kontakt</router-link>
    </nav>
    
    <!-- Router View (hier werden Komponenten gerendert) -->
    <router-view />
  </div>
</template>

<style>
nav {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 20px;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #42b883;
}

nav a.router-link-active {
  font-weight: bold;
  color: #35495e;
}
</style>

---

4. Route-Komponenten erstellen

Beispiel Home.vue:

<!-- src/views/Home.vue -->
<script setup>
import { ref } from 'vue'

const message = ref('Willkommen auf meiner Webseite!')
</script>

<template>
  <div class="home">
    <h2>{{ message }}</h2>
    <p>Dies ist die Startseite.</p>
    <button @click="$router.push('/about')">Zu Über uns</button>
  </div>
</template>

<style scoped>
.home {
  text-align: center;
  padding: 50px;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

Beispiel About.vue:

<!-- src/views/About.vue -->
<script setup>
import { ref } from 'vue'

const teamMembers = ref(['Max', 'Anna', 'Tom'])
</script>

<template>
  <div class="about">
    <h2>Über uns</h2>
    <p>Wir sind ein tolles Team!</p>
    <h3>Teammitglieder:</h3>
    <ul>
      <li v-for="member in teamMembers" :key="member">{{ member }}</li>
    </ul>
  </div>
</template>

Beispiel Contact.vue:

<!-- src/views/Contact.vue -->
<script setup>
import { ref } from 'vue'

const formData = ref({
  name: '',
  email: '',
  message: ''
})

const handleSubmit = () => {
  console.log('Formular abgesendet:', formData.value)
  alert('Vielen Dank für deine Nachricht!')
  formData.value = { name: '', email: '', message: '' }
}
</script>

<template>
  <div class="contact">
    <h2>Kontakt</h2>
    <form @submit.prevent="handleSubmit()">
      <div>
        <label>Name:</label>
        <input v-model="formData.name" required />
      </div>
      <div>
        <label>Email:</label>
        <input v-model="formData.email" type="email" required />
      </div>
      <div>
        <label>Nachricht:</label>
        <textarea v-model="formData.message" required></textarea>
      </div>
      <button type="submit">Absenden</button>
    </form>
  </div>
</template>

<style scoped>
.contact {
  max-width: 500px;
  margin: 0 auto;
}

form div {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

---

27.5 Navigation-Programmierung

Router in Komponenten nutzen:

<script setup>
import { useRouter, useRoute } from 'vue-router'

// Router-Instanz (für Navigation)
const router = useRouter()

// Route-Objekt (für aktuelle Route)
const route = useRoute()

// Navigation
const goToAbout = () => {
  // Mit `push` (fügt zur Historie hinzu)
  router.push('/about')
  
  // Mit `replace` (ersetzt aktuelle Route)
  // router.replace('/about')
  
  // Zurück gehen
  // router.back()
  
  // Vorwärts gehen
  // router.forward()
}

// Aktuelle Route auslesen
console.log('Aktuelle Pfad:', route.path)
console.log('Aktuelle Query:', route.query)
console.log('Aktuelle Params:', route.params)
</script>

<template>
  <div>
    <button @click="goToAbout()">Zu Über uns</button>
  </div>
</template>

<router-link> vs router.push():

• <router-link>: Für Links in Template (deklarier)
• router.push(): Für Programm-Navigation (imperativ)

---

27.6 Übung: Einfache Webseite mit Routing

Aufgabe: Erstelle eine Webseite mit 3 Seiten (Home, About, Contact).

Lösung:

1. Router konfigurieren (src/router/index.js):

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2. App.vue erstellen:

<script setup>
// Router ist bereits registriert
</script>

<template>
  <div id="app">
    <header>
      <nav>
        <router-link to="/">Start</router-link> |
        <router-link to="/about">Über uns</router-link> |
        <router-link to="/contact">Kontakt</router-link>
      </nav>
    </header>
    
    <main>
      <router-view />
    </main>
    
    <footer>
      <p>&copy; 2026 Meine Webseite</p>
    </footer>
  </div>
</template>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
}

header {
  background: #42b883;
  padding: 20px;
}

nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}

nav a.router-link-active {
  font-weight: bold;
  text-decoration: underline;
}

main {
  padding: 20px;
  min-height: 400px;
}

footer {
  background: #35495e;
  color: white;
  padding: 10px;
}
</style>

3. Starten:

pnpm run dev

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Vue Router ist
• ✅ Vue Router installieren
• ✅ Router konfigurieren
• ✅ Route-Komponenten erstellen
• ✅ Navigation (<router-link> und router.push())
• ✅ Einfache Webseite mit Routing erstellen

🎯 Nächster Schritt: In Kapitel 28 lernst du dynamische Routen (Parameters)!

---

← Zurück zu Kapitel 26: Template & EventsWeiter zu Kapitel 28: Dynamische Routen →