RouterLink i RouterView

Dwa kluczowe komponenty Vue Router to

<RouterLink>

i

<RouterView>

. To jak panel sterowania i ekran wyświetlacza w centrum dowodzenia NOVA LAB.

RouterLink - Nawigacja

<RouterLink>

to komponent tworzący linki nawigacyjne. W odróżnieniu od zwykłego tagu

<a>

, nie powoduje przeładowania strony - nawigacja odbywa się w ramach SPA.

1<template>
2  <nav>
3    <!-- Podstawowy RouterLink -->
4    <RouterLink to="/">Centrum Dowodzenia</RouterLink>
5    <RouterLink to="/mission-control">Kontrola Misji</RouterLink>
6    <RouterLink to="/about">O misji</RouterLink>
7  </nav>
8</template>

Named Routes

Zamiast ścieżki można uzyc nazwy trasy - bezpieczniejsze i bardziej odporne na zmiany URL:

1<template>
2  <nav>
3    <!-- Nawigacja po nazwie -->
4    <RouterLink :to="{ name: 'home' }">Home</RouterLink>
5    <RouterLink :to="{ name: 'mission-control' }">Kontrola Misji</RouterLink>
6  </nav>
7</template>

Klasy Aktywnego Linku

RouterLink automatycznie dodaje klasy CSS do aktywnych linków:

• router-link-active

  - gdy ścieżka częściowo pasuje

• router-link-exact-active

  - gdy ścieżka dokładnie pasuje

1<template>
2  <RouterLink
3    to="/mission-control"
4    active-class="is-active"
5    exact-active-class="is-exact-active"
6  >
7    Kontrola Misji
8  </RouterLink>
9</template>
10
11<style>
12.router-link-active {
13  color: #00ff88;
14  font-weight: bold;
15}
16
17.router-link-exact-active {
18  border-bottom: 2px solid #00ff88;
19}
20</style>

RouterView - Wyświetlanie

<RouterView>

to miejsce, w którym renderuje się komponent odpowiadający aktualnemu route. Umieszczasz go w layoucie aplikacji:

1<!-- App.vue -->
2<template>
3  <div class="app">
4    <nav class="main-nav">
5      <RouterLink to="/">Home</RouterLink>
6      <RouterLink to="/mission-control">Kontrola Misji</RouterLink>
7    </nav>
8
9    <!-- Tu pojawia się aktualny widok -->
10    <main>
11      <RouterView />
12    </main>
13  </div>
14</template>

Nawigacja zmienia zawartość

<RouterView>

, podczas gdy reszta szablonu (np. nawigacja, header, footer) pozostaje na miejscu.