Vue Academy · Lekcja

Programowa nawigacja i useRouter

Composable useRouter() i useRoute() oraz metody router.push(), router.replace() i router.go().

Programowa nawigacja i useRouter to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. 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 4 lekcji w sumie.

Nawigacja z poziomu kodu

Oprócz RouterLink często trzeba nawigować z poziomu JavaScriptu — na przykład po przesłaniu formularza lub zalogowaniu. Composable useRouter udostępnia instancję routera potrzebną do wykonania tej operacji.

Pobieranie routera

Należy wywołać useRouter() wewnątrz <script setup>. Zwrócony obiekt udostępnia push, replace, go i inne elementy.

import { useRouter } from 'vue-router'
const router = useRouter()

Nawigowanie za pomocą push

router.push dodaje wpis do stosu historii — podobnie jak kliknięcie odnośnika. W najprostszej postaci przyjmuje ciąg znaków ze ścieżką.

router.push('/dashboard')

Push z obiektem trasy

Można również przekazać obiekt zawierający name, params i query. Nazwane trasy pozwalają uniknąć wpisywania ścieżek na stałe.

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

Replace: bez wpisu w historii

router.replace nawiguje bez dodawania wpisu do historii, więc przycisk Wstecz pomija tę stronę. Należy użyć go po zalogowaniu, aby użytkownik nie mógł wrócić do strony logowania.

router.replace('/dashboard')

Przechodzenie wstecz i do przodu

router.go(n) porusza się po historii o n kroków. router.go(-1) cofa o jedną stronę, a router.go(1) przechodzi o jedną stronę do przodu.

function goBack() {
  router.go(-1)
}

Po wykonaniu akcji asynchronicznej

Typowy przebieg wygląda następująco: należy przesłać formularz, zaczekać na wynik, a następnie wykonać nawigację. push zwraca Promise, na który można zaczekać, aby potwierdzić zakończenie operacji.

async function login() {
  await auth.signIn(form)
  router.push('/dashboard')
}

Odczytywanie bieżącej trasy

Aby odczytać parametry i zapytanie bieżącej trasy, należy użyć composable useRoute. Nie należy mylić go z useRouter — useRoute oznacza trasę, a useRouter służy do nawigacji.

import { useRoute } from 'vue-router'
const route = useRoute()

Dostęp do parametrów

Dynamiczne segmenty należy odczytywać za pomocą route.params. Dla trasy /user/:id identyfikator id znajduje się w route.params.id.

const userId = route.params.id

Dostęp do parametrów zapytania

Ciąg zapytania należy odczytywać za pomocą route.query. Dla ?tab=profile należy użyć route.query.tab.

const tab = route.query.tab

Reagowanie na zmiany parametrów

Ponieważ route jest reaktywne, należy je obserwować za pomocą watch, aby reagować na zmiany parametrów podczas pozostawania w tym samym komponencie.

import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Szybki test

Proszę sprawdzić wiedzę na temat nawigacji programistycznej.

Podsumowanie

Nauczyli się Państwo korzystać z nawigacji programistycznej:

useRouter() udostępnia push, replace i go.
push dodaje wpis do historii, replace tego nie robi, a go(-1) cofa o jedną stronę.
push przyjmuje ciąg znaków ze ścieżką lub obiekt { name, params, query }.
useRoute() odczytuje bieżące parametry i zapytanie oraz jest reaktywne.

Często zadawane pytania

Czy lekcja „Programowa nawigacja i useRouter” jest bezpłatna?

Tak — pełny tekst „Programowa nawigacja i useRouter” 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 4 lekcji w sumie.

Co nauczysz się w „Programowa nawigacja i useRouter”?

Composable useRouter() i useRoute() oraz metody router.push(), router.replace() i router.go(). Ć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 4 z 4.

Ile czasu zajmuje lekcja „Programowa nawigacja i useRouter”?

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