Vue Academy · Lektion

Programmatisk navigation og useRouter

router.push(), router.replace(), router.go(), composables til useRouter() og useRoute()

Lektion 4 af 413 trin

Programmatisk navigation og useRouter er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Navigation fra kode

Ud over RouterLink har du ofte brug for at navigere fra JavaScript — efter afsendelse af en formular eller login. Den composable useRouter giver dig routerinstansen, så du kan gøre dette.

Hentning af routeren

Kald useRouter() inde i <script setup>. Det returnerede objekt eksponerer push, replace, go og meget mere.

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

Navigation med push

router.push tilføjer en post i historikstakken — ligesom når du klikker på et link. Den enkleste form modtager en sti som streng.

router.push('/dashboard')

Push med et ruteobjekt

Du kan også videregive et objekt med name, params og query. Navngivne ruter undgår hårdkodede stier.

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

Replace: ingen historikpost

router.replace navigerer uden at tilføje noget til historikken, så tilbageknappen springer den over. Brug den efter login, så brugerne ikke kan gå tilbage til loginsiden.

router.replace('/dashboard')

Gå tilbage og frem

router.go(n) bevæger sig gennem historikken med n trin. router.go(-1) går én side tilbage, og router.go(1) går frem.

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

Efter en asynkron handling

Et typisk forløb er: indsend en formular, afvent resultatet, og naviger derefter. push returnerer et Promise, som du kan afvente, indtil navigationen er gennemført.

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

Læsning af den aktuelle rute

Hvis du vil læse parametre og forespørgsel for den aktuelle rute, skal du bruge den composable useRoute. Forveksl den ikke med useRouter — useRoute er ruten, og useRouter er navigationsobjektet.

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

Adgang til parametre

Læs dynamiske segmenter via route.params. For en rute som /user/:id findes id på route.params.id.

const userId = route.params.id

Adgang til forespørgselsstrenge

Læs forespørgselsstrengen via route.query. For ?tab=profile skal du bruge route.query.tab.

const tab = route.query.tab

Reaktion på parameterændringer

Da route er reaktiv, skal du overvåge den med watch for at reagere, når parametre ændres, mens du bliver på den samme komponent.

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

Videnstjek

Test din viden om programmatisk navigation.

Besvar den i den interaktive lektion

Opsummering

Du lærte om programmatisk navigation:

useRouter() giver push, replace og go.
push tilføjer historik, replace gør ikke, og go(-1) går tilbage.
push accepterer en sti som streng eller et objekt med { name, params, query }.
useRoute() læser aktuelle parametre og forespørgsel og er reaktiv.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Programmatisk navigation og useRouter” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Programmatisk navigation og useRouter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Programmatisk navigation og useRouter”?

router.push(), router.replace(), router.go(), composables til useRouter() og useRoute() Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Programmatisk navigation og useRouter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Vue Academy