Navigeringsvakter
Skydda routes och kör logik vid navigering med guards.
Navigeringsvakter är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.
Vad är navigeringsvakter?
Navigeringsvakter låter dig köra kod före, under eller efter en ruttändring.
- Blockera eller omdirigera navigering
- Kontrollera autentisering
- Bekräfta innan en sida lämnas
Typer av vakter
Det finns tre nivåer av vakter:
- Globala vakter körs vid varje navigering
- Vakter per rutt körs för en specifik rutt
- Komponentinterna vakter körs inuti en komponent
Den globala vakten beforeEach
router.beforeEach körs före varje navigering. Den tar emot målrutten och den aktuella rutten.
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})Tillåta eller omdirigera
I Vue Router 4 returnerar du ett värde för att styra flödet.
- Returnera true eller inget för att tillåta
- Returnera false för att avbryta
- Returnera en route location för att omdirigera
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})Metafält för rutter
Lägg till anpassade meta-data i rutter, till exempel requiresAuth, och läs dem i vakter.
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]En autentiseringsvakt
Ett vanligt mönster är att skydda rutter genom att kontrollera autentiseringen i en global vakt.
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter per rutt
beforeEnter skyddar en enskild rutt direkt i dess definition.
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]Komponentinterna vakter
Komponenter kan definiera sina egna vakter. onBeforeRouteLeave körs när du navigerar bort.
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdate körs när rutten ändras men samma komponent återanvänds, till exempel vid en parameterändring.
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})Callbacken next (klassisk stil)
Äldre kod använder ett tredje argument, next, för att styra navigeringen. Det är nu bättre att returnera ett värde.
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})Returvärde jämfört med next()
Två sätt, samma mål:
- Returnera ett värde (modernt och renare): true, false eller en route location
- Anropa next() (klassiskt): fortsätt eller omdirigera
Blanda inte stilarna i samma vakt. Returstilen rekommenderas för ny kod.
Snabbkontroll
Testa dina kunskaper om navigeringsvakter.
Sammanfattning: Navigeringsvakter
Du har lärt dig att styra navigering:
- Den globala vakten beforeEach körs för varje rutt
- Returnera true för att tillåta, false för att avbryta eller en location för att omdirigera
- meta-fält som requiresAuth styr autentiseringskontroller
- beforeEnter skyddar en enskild rutt
- Komponentinterna vakter som onBeforeRouteLeave hanterar navigering bort från sidan
Du har slutfört den grundläggande Vue.js-kursen!
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Navigeringsvakter” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Navigeringsvakter”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Navigeringsvakter”?
Skydda routes och kör logik vid navigering med guards. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.
Hur lång tid tar lektionen ”Navigeringsvakter”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Vue Router
- Nästlade och dynamiska routes
- Navigeringsvakter