Kapitel 28: Vue Router (Teil 2) - Navigation

📙 Lernziel: <router-link> und useRouter() für Navigation meistern!

---

28.1 <router-link> - Deklarative Navigation

<router-link> ist die deklarative Art zu navigieren (ähnlich wie <a> Tag).

Grundlagen:

<script setup>
// Keine Importe nötig für <router-link>
</script>

<template>
  <div>
    <!-- Einfache Navigation -->
    <router-link to="/">Start</router-link>
    <router-link to="/about">Über uns</router-link>
    <router-link to="/contact">Kontakt</router-link>
    
    <!-- Mit `to` als Objekt -->
    <router-link :to="{ path: '/' }">Start</router-link>
    <router-link :to="{ name: 'about' }">Über uns</router-link>
  </div>
</template>

<style scoped>
a {
  margin: 0 10px;
  text-decoration: none;
  color: #42b883;
}

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

Wichtig:

• ✅ <router-link> wird zu <a> Tag gerendert
• ✅ to Attribut kann String oder Objekt sein
• ✅ Automatisches Hervorheben der aktiven Route

---

28.2 <router-link> - Aktive Klasse anpassen

Aktive Klasse anpassen:

<template>
  <div>
    <!-- Benutzerdefinierte aktive Klasse -->
    <router-link 
      to="/" 
      active-class="active-link"
    >
      Start
    </router-link>
    
    <!-- Benutzerdefinierte nicht-aktive Klasse -->
    <router-link 
      to="/about" 
      exact-active-class="exact-active-link"
    >
      Über uns
    </router-link>
  </div>
</template>

<style scoped>
.active-link {
  color: #42b883;
  border-bottom: 2px solid #42b883;
}

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

Unterschied:

• active-class: Aktiv für alle untergeordneten Routen
• exact-active-class: Nur exakt für diese Route

---

28.3 Programmatische Navigation mit useRouter()

useRouter() ermöglicht imperatives Navigieren.

Grundlagen:

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

const router = useRouter()

// 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()
  
  // Zu einer bestimmten Route in der Historie
  // router.go(-2)  // 2 Schritte zurück
}
</script>

<template>
  <div>
    <h2>Programmatische Navigation</h2>
    <button @click="goToAbout">Zu Über uns</button>
    <button @click="router.back()">Zurück</button>
    <button @click="router.forward()">Weiter</button>
  </div>
</template>

---

28.4 useRoute() - Aktuelle Route auslesen

useRoute() gibt das aktuelle Route-Objekt zurück.

Beispiel:

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

const route = useRoute()

// Route-Informationen auslesen
console.log('Pfad:', route.path)
console.log('Name:', route.name)
console.log('Query:', route.query)
console.log('Params:', route.params)
console.log('Hash:', route.hash)
console.log('Meta:', route.meta)

// Reaktiv auf Route-Änderungen reagieren
watch(() => route.path, (newPath) => {
  console.log('Route geändert:', newPath)
})
</script>

<template>
  <div>
    <h2>Aktuelle Route</h2>
    <p>Pfad: {{ route.path }}</p>
    <p>Name: {{ route.name }}</p>
    <p>Query: {{ JSON.stringify(route.query) }}</p>
  </div>
</template>

---

28.5 Navigation mit Parametern

Query-Parameter:

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

const router = useRouter()
const route = useRoute()

// Navigation mit Query-Parametern
const search = () => {
  router.push({
    path: '/search',
    query: {
      q: 'Vue 3',
      page: 1
    }
  })
}

// Query-Parameter auslesen
const searchQuery = route.query.q
const page = route.query.page
</script>

<template>
  <div>
    <button @click="search">Suchen</button>
    <p>Suche: {{ route.query.q }}</p>
    <p>Seite: {{ route.query.page }}</p>
  </div>
</template>

Route-Parameter (später in Kapitel 29):

// Route-Konfiguration
{ path: '/user/:id', component: User, name: 'user' }

// Navigation
router.push({ name: 'user', params: { id: 123 } })

// Auslesen
const userId = route.params.id

---

28.6 Übung: Navigationsmenü erstellen

Aufgabe: Erstelle ein Navigationsmenü mit <router-link> und programmatischer Navigation.

Lösung:

<!-- components/NavBar.vue -->
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateTo = (path) => {
  router.push(path)
}

const goBack = () => {
  router.back()
}
</script>

<template>
  <nav class="navbar">
    <!-- Deklarativ (router-link) -->
    <div class="nav-links">
      <router-link to="/">Start</router-link>
      <router-link to="/about">Über uns</router-link>
      <router-link to="/contact">Kontakt</router-link>
      <router-link to="/users">Benutzer</router-link>
    </div>
    
    <!-- Programmatisch (Buttons) -->
    <div class="nav-buttons">
      <button @click="navigateTo('/')">Start</button>
      <button @click="navigateTo('/about')">Über uns</button>
      <button @click="goBack()">Zurück</button>
    </div>
  </nav>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #42b883;
  color: white;
}

.nav-links a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav-links a.router-link-active {
  background: rgba(255, 255, 255, 0.3);
  font-weight: bold;
}

.nav-buttons button {
  background: white;
  color: #42b883;
  border: none;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.nav-buttons button:hover {
  background: #f5f5f5;
}
</style>

Verwendung in App.vue:

<script setup>
import NavBar from './components/NavBar.vue'
</script>

<template>
  <div>
    <NavBar />
    <main>
      <router-view />
    </main>
  </div>
</template>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ <router-link> für deklarative Navigation
• ✅ Aktive Klasse anpassen
• ✅ Programmatische Navigation mit useRouter()
• ✅ useRoute() für aktuelle Route
• ✅ Navigation mit Parametern
• ✅ Praxis: Navigationsmenü

🎯 Nächster Schritt: In Kapitel 29 lernst du Route-Parameter (Query & Params)!

---

← Zurück zu Kapitel 27: Vue Router GrundlagenWeiter zu Kapitel 29: Route-Parameter →