Vue Router

Vue Router ist die offizielle Library, um mehrseitige Vue Applikationen zu erstellen.

Lösungsschritte

Lade folgendes Vue Projekt herunter und richte es lokal ein. Öffne es anschliessend in VS Code.

Download GitHub directorydownload-directory.github.io

Vue.js Vorlage

cd vue-router
npm install
npm run dev

RouterView

• Importiere die RouterView Komponente im <script setup> Teil der App.vue

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

• Platziere die Komponente im <main> Tag, beim «Inhalt» Kommentar

<main class="container">  
  <!-- Inhalt -->  
  <RouterView />  
</main>

Die <Home> Komponente wird jetzt an der Stelle von <RouterView> gerendert.

Routes definieren

Neue Routes können in der Datei router/index.js definiert werden. Im routes Array muss ein neuer Eintrag mit den Eigenschaften path und component ergänzt werden.

• Füge folgende neue Route in der router/index.js Datei hinzu:

routes: [  
  {  
    path: '/',  
    component: HomeView  
  },  
+  {
+    path: '/about',
+    component: AboutView
+  },
]

• Ergänze einen Import für die AboutView Komponente am Anfang der Datei:

import HomeView from '../views/HomeView.vue'
+import AboutView from '../views/AboutView.vue'

Rufe im Browser nun folgende URLs auf, um das Routing in Aktion zu sehen (Port muss ggf. angepasst werden):

• Home: http://127.0.0.1:5173

• Über uns: http://127.0.0.1:5173/about

RouterLink

Zuletzt soll die Navigation im Header auf die entsprechenden Routes verweisen.

Vue Router stellt hierfür eine spezielle <RouterLink> Komponente zur Verfügung, mit der ein Link auf eine Route generiert werden kann.

Die <RouterLink> Komponente akzeptiert eine to Property, mit der das Ziel des Links als Objekt angegeben werden kann:

<RouterLink to="/path-der-route">
  Linktext
</RouterLink>

• Importiere die Komponente im <script setup> Bereich der App.vue

<script setup>  
import { RouterView, RouterLink } from 'vue-router'  
</script>

• Ersetzte die normalen <a> Tags in der App.vue mit folgenden <RouterLink> Komponenten:

 <nav>  
    <!-- Navigation -->  
-   <a href="#">Home</a>  
-   <a href="#">Über uns</a>  
+   <RouterLink to="/">Home</RouterLink>
+   <RouterLink to="/about">Über uns</RouterLink>
 </nav>

Du kannst jetzt über die Navigation zwischen den Seiten wechseln.

Weil wir die <RouterLink> Komponente verwenden, markiert Vue automatisch den aktiven Menüpunkt für uns mit einer speziellen CSS-Klasse, die in diesem Beispiel bereits gestyled wurde.

Weitere Route ergänzen

• Ergänze in der routes/index.js eine neue Route für `/secret

• Die neue Route soll die TopSecretView.vue Komponente anzeigen

• Ergänze einen neuen Menüpunkt, der auf die neue Route verlinkt

Navigation guards

Navigation guards ermöglichen dir, den Zugriff auf eine Route zu steuern.

So kannst du beispielsweise einen Benutzer für spezifische Seiten auf ein Login umleiten, wenn dieser noch nicht eingeloggt ist.

• Ergänze für die /secret Route in der routes/index.js eine beforeEnter Methode:

{  
  path: '/secret', 
  component: TopSecretView,
+  beforeEnter: (to, from, next) => {
+    next()
+    console.log('navigiert von', from.path, 'nach', to.path)
+  }
},

Du erhältst drei Parameter in dieser Methode:

• to enthält die Route, die ein Besucher aufruf (in diesem Fall /secret)

• from enthält die vorherige Route, von der ein Besucher navigiert ist

• next ist eine Funktion, mit der du die Navigation beinflussen kannst. Es ist wichtig, dass die next() Funktion in beforeEnter aufgerufen wird. Wenn du den Funktionsaufruf entfernst, blockiert Vue die Navigation (das kannst du gerne ausprobieren)

In der Browser-Konsole wird nun immer beim Aufruf der /secret Route eine Nachricht geloggt.

Wir möchten den Zugriff auf die /secret Route nur zu Zeiten mit «geraden Minuten» (0, 2, 4, 6...) zulassen. Zu Zeiten mit ungeraden Minuten soll der Besucher auf die Home-Route umgeleitet werden.

• Ergänze den benötigten Code in der beforeEnter Methode um herauszufinden, ob die aktuelle Uhrzeit eine gerade oder ungerade Minutenzahl hat:

beforeEnter: (to, from, next) => {
    const evenMinutes = ... // Hier bist Du gefragt!
    
    if (evenMinutes) { 
        console.log('Zugriff erlaubt')
        next() // Navigation zulassen
    } else {
        console.log('ZUGRIFF VERWEIGERT!')
        // next() wird in diesem Fall nie aufgerufen,
        // also blockiert Vue die Navigation zur Route.
    }
}

Die next Funktion ermöglicht dir, einen Benutzer umzuleiten. Dazu kannst du der Funktion einfach die Ziel-Route als Parameter übergeben:

next('/ziel-route')

• Ergänze im else Teil deiner Navigation guard eine Umleitung auf /home, wenn die Minutenzahl ungerade ist. Der next() Aufruf im if Teil bleibt unverändert.

Du solltest nun nur noch zu geraden Minutenzahlen auf die /secret Route zugreifen können. Zu unteraden Zeiten solltest du immer direkt auf die / Route umgeleitet werden.

Zusatzaufgabe: Nested Routes

Erstelle auf der AboutView unterhalb der Über uns Überschrift eine weitere Navigation:

• News (/about/news)

• Offene Stellen (/about/jobs)

Erstelle dazu zwei weitere View Komponenten:

• NewsView

• JobsView

Sorge nun mit Nested Routes dafür, dass diese beiden Unterseiten über die neue Navigation auf der AboutView korrekt angezeigt werden. Die Inhalte sollen dabei jeweils unterhalb der erstellten Navigation erscheinen:

Über uns

* News
* Offene Stellen

Aktuelle Neuigkeiten:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.