Vue Academy · Lekcja

Konfiguracja Vue Router

Zainstalują Państwo Vue Router i zdefiniują pierwsze trasy.

Lekcja 1 z 313 kroki

Konfiguracja Vue Router to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Czym jest Vue Router?

Vue Router to oficjalna biblioteka routingu dla Vue.

Mapuje adresy URL na komponenty
Umożliwia nawigację w aplikacji jednostronicowej bez pełnego przeładowywania stron
Zarządza historią, odnośnikami i parametrami

Instalowanie Vue Router

Należy dodać Vue Router do projektu za pomocą npm.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Tworzenie komponentów tras

Każda trasa renderuje komponent. Na początek należy utworzyć proste komponenty stron.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Definiowanie tablicy routes

Tablica routes mapuje ścieżki na komponenty.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

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

createRouter

Funkcja createRouter tworzy router na podstawie tras i trybu historii.

import { createRouter, createWebHistory } from "vue-router"

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

export default router

createWebHistory

createWebHistory używa interfejsu historii HTML5, aby tworzyć czytelne adresy URL, takie jak /about.

Adres URL nie zawiera hasha
Wymaga konfiguracji serwera, aby działały bezpośrednie odnośniki
Alternatywą jest createWebHashHistory (/#/about)

Rejestrowanie routera

Należy zainstalować router w aplikacji za pomocą app.use.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

Komponent router-view to miejsce, w którym renderowany jest komponent dopasowanej trasy.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Do nawigacji należy używać router-link zamiast zwykłych znaczników kotwicy. Pozwala to uniknąć pełnego przeładowywania strony.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Stylowanie aktywnego odnośnika

router-link automatycznie dodaje klasy CSS do aktywnego odnośnika.

router-link-active dla częściowych dopasowań
router-link-exact-active dla dokładnych dopasowań

Należy ostylować te klasy, aby wyróżnić bieżącą stronę.

Połączenie wszystkiego

Pełny przepływ:

Zdefiniowanie tras mapujących ścieżki na komponenty
Utworzenie routera za pomocą createRouter i createWebHistory
Zarejestrowanie go za pomocą app.use(router)
Umieszczenie router-view i nawigowanie za pomocą router-link

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat konfigurowania Vue Router.

Odpowiedz w interaktywnej lekcji

Podsumowanie: konfigurowanie Vue Router

Skonfigurowali Państwo routing po stronie klienta:

Instalowanie za pomocą npm install vue-router
Definiowanie tablicy routes
Tworzenie createRouter za pomocą createWebHistory
Rejestrowanie przez app.use(router)
Używanie router-view i router-link

Następnie: trasy zagnieżdżone i dynamiczne.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Konfiguracja Vue Router” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Vue Router” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Konfiguracja Vue Router”?

Zainstalują Państwo Vue Router i zdefiniują pierwsze trasy. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Konfiguracja Vue Router”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy