Vue Router yönlendirme ve guard'ları nasıl işler?

Question

Accepted Answer

**Vue Router**, Vue SPA'ları için resmi istemci tarafı yönlendiricisidir. URL'leri bileşenlere eşler ve bunları **tam sayfa yeniden yüklemeleri olmadan** değiştirir ve navigasyon **öncesinde** (kimlik doğrulama kontrolleri gibi) mantık çalıştırmak için **navigasyon guard'ları** sağlar. ## Rotaları tanımlama ```js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", component: Home }, { path: "/users/:id", component: UserProfile }, // dynamic param { path: "/dashboard", component: () => import("./Dashboard.vue"), // lazy-loaded meta: { requiresAuth: true } }, // attach metadata ]; const router = createRouter({ history: createWebHistory(), routes }); ``` ## Navigasyon ve parametreleri okuma ```vue ``` ## Navigasyon guard'ları — navigasyondan önce mantık çalıştırma ```js // global guard — runs before EVERY navigation (great for auth) router.beforeEach((to, from) => { const authed = useAuthStore().isLoggedIn; if (to.meta.requiresAuth && !authed) { return "/login"; // redirect: return a path (or false to cancel) } // returning true / nothing → allow the navigation }); ``` Guard'lar **`to`** (hedef rota) ve **`from`** (geçerli rota) alırlar ve izin verebilir, iptal edebilir (`false`) veya yeniden yönlendirebilir (bir konum döndürebilir). `meta.requiresAuth` bayrağı + global `beforeEach`, kimlik doğrulama geçidi için standart desendir. ## Guard seviyeleri ```text Global: router.beforeEach / afterEach — every navigation (auth, analytics) Per-route: beforeEnter in the route config — specific routes In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts ``` ## İç içe geçmiş rotalar ve diğer özellikler ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Ayrıca: rota parametreleri, sorgu dizeleri, adlandırılmış rotalar, kaydırma davranışı ve kod bölme için tembel yüklenen rota bileşenleri. ## Neden önemli Vue Router, herhangi bir çok sayfalı Vue SPA için gereklidir — istemci tarafı navigasyon (hızlı, yeniden yüklemeler yok), dinamik/iç içe geçmiş rotalar ve `RouterLink`/`RouterView` sağlar. Navigasyon guard'ları, çapraz kesitsel sorunlar için temel özelliğidir: kimlik doğrulama ile korunan rotaları sınırlama, sayfa görünümlerini günlüğe kaydetme ve kaydedilmemiş formlardan uzaklaşmayı engelleme.