Vue Router: rota tanımlama, yönlendirme ve erişim koruması

Vue Router ne yapar?

Vue Router, Vue'nun resmî yönlendirme kütüphanesidir. Tarayıcı adresi ile ekranda görünen bileşen arasındaki eşleşmeyi kurar: adres değişince ilgili bileşen yüklenir, sayfa yenilenmeden tek sayfalı uygulama deneyimi sağlanır. Aynı zamanda adresten parametre okumayı, iç içe sayfa yapılarını, sayfa geçişlerini ve erişim kontrolünü (rota koruması) yönetir.

Rota, bir adres desenini bir bileşene bağlayan tanımdır. Uygulamanın rota listesi baştan bir dosyada tutulur; böylece hangi adresin hangi sayfaya ait olduğu tek yerden okunur.

Kurulum ve ilk rotalar

Rotalar createRouter ile tanımlanır, uygulamaya use ile eklenir:

import { createRouter, createWebHistory } from 'vue-router' import HomePage from './views/HomePage.vue'

const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'home', component: HomePage }, { path: '/products', name: 'products', component: () => import('./views/Products.vue') }, { path: '/products/:id', name: 'product-detail', component: () => import('./views/ProductDetail.vue') }, { path: '/login', name: 'login', component: () => import('./views/Login.vue') } ] })

export default router

createApp(App).use(router).mount('#app') ile uygulamaya eklenir. Şablonda sayfa içeriğinin görüneceği yeri RouterView, bağlantıları ise RouterLink belirler:

<RouterLink to="/products">Ürünler</RouterLink> <RouterView />

Bileşen alanında () => import(...) kullanmak, o sayfanın kodunu ancak ziyaret edildiğinde yükler. Büyük uygulamalarda ilk açılış yükünü azaltmak için sayfaları bu şekilde tembel yüklemek iyi bir alışkanlıktır.

Dinamik rota ve parametre okuma

Adreste değişen bir bölüm iki nokta üst üste ile başlayan parametreyle tanımlanır: /products/:id. Bileşende bu değer route nesnesinden okunur:

<script setup> import { useRoute, useRouter } from 'vue-router'

const route = useRoute() const router = useRouter()

function goBack() { router.push({ name: 'products' }) } </script>

<template> <strong>Ürün: {{ route.params.id }}</strong> <button @click="goBack">Listeye dön</button> </template>

useRoute o anki rotayı (parametreler, sorgu, meta alanlar), useRouter ise gezinme işlevlerini (push, replace) verir. Aynı bileşen farklı parametreyle yeniden kullanılır: kullanıcı /products/sampleA adresinden /products/sampleB adresine geçince bileşen yeniden oluşturulmaz, yalnızca parametre değişir. Bu yüzden veri yüklemesini parametreyi izleyen bir watch içinde yapmak gerekir.

Rota koruması: giriş zorunluluğu örneği

Rota koruması, gezinme gerçekleşmeden önce çalışan ve gezinmeye izin veren, iptal eden ya da başka yere yönlendiren bir fonksiyondur. En sık kullanım, oturum açmamış kullanıcıyı giriş sayfasına göndermektir. Önce hangi rotaların korumalı olduğunu rotanın meta alanında işaretleyin:

{ path: '/hesabim', component: Hesabim, meta: { girisGerekli: true } }

Sonra global koruma yazın:

router.beforeEach((to, from) => { const oturum = useOturumStore() if (to.meta.girisGerekli && !oturum.girisYapildi && to.name !== 'giris') { return { name: 'login', query: { donus: to.fullPath } } } })

Vue Router dokümantasyonuna göre koruma false döndürürse gezinme iptal olur, bir rota konumu döndürürse kullanıcı oraya yönlendirilir, hiçbir şey ya da true döndürürse gezinme onaylanır. Giriş sayfasına yönlendirirken hedefin giriş sayfasının kendisi olup olmadığını kontrol etmek şarttır; aksi halde sonsuz yönlendirme döngüsü oluşur. Girişten sonra kullanıcıyı, sorgu parametresinde taşıdığınız asıl hedefe geri gönderin.

Bileşen içi koruma: kaydedilmemiş değişiklik uyarısı

Kullanıcı formu doldururken sayfadan ayrılmaya çalışırsa uyarmak için bileşen içi koruma kullanılır:

import { onBeforeRouteLeave } from 'vue-router'

onBeforeRouteLeave(() => { if (formDegisti.value) { return window.confirm('Kaydedilmemiş değişiklikler var. Çıkmak istiyor musunuz?') } })

Fonksiyon false döndürürse gezinme iptal olur. Bu koruma yalnızca ilgili bileşen etkinken çalışır, global koruma gibi her gezinmede devreye girmez. Global bir koruma tüm uygulamayı ilgilendiren kurallar (oturum, yetki), bileşen içi koruma ise o ekrana özel kurallar içindir.

Rota yapısını düzenli tutma

Sayfa sayısı arttıkça rotaları iç içe tanımlamak düzen sağlar. Ortak bir yerleşimi (kenar menü, üst çubuk) paylaşan sayfalar, yerleşim bileşenini üst rota yapıp çocuk rotaları içine alır; yerleşim bileşeninde ek bir RouterView çocuk sayfayı gösterir. Yetki işaretini üst rotaya koyduysanız korumada to.meta yerine to.matched dizisini tarayın: eşleşen rota kayıtlarından herhangi birinde işaret varsa çocuk rota da korunmuş olur, her çocuğa ayrıca yazmanız gerekmez.

Rotalara ad vermek, adresi koda gömmeden gezinmeyi sağlar: adres değişince tek yerde güncellersiniz. Bulunamayan adresler için en sona bir yakalayıcı rota koyun ve kullanıcıya anlamlı bir sayfa gösterin.

Sık yapılan hatalar

• Korumada sonsuz yönlendirme: Hedef giriş sayfasıysa yönlendirme yapmayın.
• Parametre değişince verinin yenilenmemesi: Aynı bileşen yeniden kullanılır, route.params üzerine watch koyun.
• Yetki kontrolünü yalnızca ön yüzde yapmak: Ön yüz koruması kullanıcı deneyimidir, güvenlik değildir; yetkiyi sunucu tarafında da doğrulayın.
• Store'u modül yüklenirken çağırmak: Pinia gibi store'ları koruma fonksiyonunun içinde çağırın.
• Hash ile geçmiş modu karışıklığı: Geçmiş modunu (createWebHistory) kullanıyorsanız sunucunun bilinmeyen adresleri uygulamaya yönlendirmesi gerekir; aksi halde sayfa yenilemede hata alırsınız.
• Her sayfayı baştan yüklemek: Tembel yükleme olmadan ilk paket gereksiz büyür.

Mindset programlarında nerede çalışılır?

Vue.js 3 ve Composition API ile Uygulama Geliştirme eğitimi, durum yönetimi ve yönlendirme konusunu ayrı bir modülde işler; reaktivite, bileşen iletişimi ve performans modülleriyle birlikte bütün bir uygulama akışını kapsar. Çok sayfalı bir Vue uygulamasına rota yapısı ve erişim kuralları eklemek isteyen ön yüz geliştiricileri için uygundur.

Kurumsal ekiplerde rota ve yetki yapısı çoğu zaman ortak bir kuraldır: hangi rota hangi rolle açılır, oturum yenilemesi nasıl yapılır. Ekibinize özel bir çalıştay planlamak isterseniz kurumsal eğitim talebi üzerinden kapsamı belirleyebilirsiniz.