- Katılım
- 7 Nis 2025
- Konular
- 367
- Mesajlar
- 780
- Çözümler
- 1
- Tepkime puanı
- 121
- Puan
- 93
- Konum
- İstanbul
- Web sitesi
- forumagel.com
Hazır Kod Bankası - Konu 29: Vue.js ile Tek Sayfa Uygulamaları (SPA) ve Vue Router Temelleri
Hazır Kod Bankası Serimizin Yirmi Dokuzuncu Konusu: Vue.js ile Tek Sayfa Uygulamaları (SPA) ve Vue Router Temelleri!
Merhaba arkadaşlar! Web'in temel dillerini (HTML, CSS, JavaScript), API kullanımını (Client-Side JavaScript ile Web API Tüketimi (Fetch API)) ve Vue.js framework'ünün temellerini (JavaScript Frontend Frameworklerine Giriş (Vue.js Temelleri)) ile bileşenler kavramını (Vue.js Bileşenleri (Components) ve Veri İletişimi (Props, Emit)) gördük. Artık dinamik ve bileşen tabanlı arayüzler oluşturabiliyoruz. Şimdi modern web geliştirmenin yaygın yaklaşımlarından biri olan Tek Sayfa Uygulamaları (Single Page Applications - SPA) kavramına ve Vue.js ile SPA geliştirmek için kullanılan Vue Router kütüphanesine giriş yapma zamanı geldi.
Geleneksel Web Siteleri (Multi-Page Applications - MPA), her yeni sayfaya gidildiğinde tarayıcının tüm sayfayı (HTML, CSS, JS) yeniden yüklemesine dayanır. Bu, her tıklamada kısa bir beyaz ekran veya yüklenme süresi demektir.
Tek Sayfa Uygulamaları (SPA) ise, sayfa ilk yüklendiğinde uygulamanın ana HTML, CSS ve JavaScript kaynaklarının büyük bir kısmını indirir. Kullanıcı farklı "sayfalara" (aslında farklı "görünümlere") gittiğinde, tarayıcı tüm sayfayı yeniden yüklemek yerine sadece değişen içeriği dinamik olarak günceller (genellikle JavaScript ile DOM manipülasyonu yaparak veya framework'ün mekanizmalarını kullanarak). Bu, kullanıcıya masaüstü veya mobil uygulamalara benzer şekilde daha akıcı ve hızlı bir deneyim sunar.
SPA'larda farklı görünümler arasında geçiş yapmak, sayfanın sadece bir kısmını güncellerken tarayıcının URL'sini de değiştirmeyi gerektirir. İşte bu işleme Client-Side Routing (İstemci Taraflı Yönlendirme) denir ve sunucu müdahalesi olmadan tarayıcı tarafında yönetilir. Vue.js ile SPA geliştirmek için resmi ve en popüler yönlendirme kütüphanesi Vue Router'dır.
2. Client-Side Routing Nedir? Vue Router Ne İşe Yarar?[/B]
- Client-Side Routing: Tarayıcının geçmiş API'sini (`history.pushState`, `history.replaceState`) kullanarak URL'yi değiştirmek ve o URL'ye karşılık gelen içeriği JavaScript ile sayfaya yüklemek/göstermek. Sayfanın tamamı yeniden yüklenmez.
- Vue Router: Vue.js uygulamalarınızda istemci taraflı yönlendirmeyi yönetmek için resmi kütüphanedir.
- URL'leri (Path) belirli Vue bileşenlerine (Component) eşler.
- Kullanıcıların farklı URL'ler arasında gezinebilmesi için gezinme linkleri (`<router-link>`) oluşturur.
- Eşleşen bileşenin nerede görüntüleneceğini belirten bir yer tutucu (`<router-view>`) sağlar.
- URL değişikliklerini izler ve otomatik olarak doğru bileşeni render eder.
3. Vue Router Kurulumu (Kavramsal) ve Temel Yapı[/B]
Vue Router, genellikle `npm`, `yarn` veya `pnpm` gibi bir paket yöneticisi ile projenize dahil edilir (`npm install vue-router@4`). Temel Vue.js CDN kullanımına kıyasla, Vue Router kullanmak genellikle Vite veya Vue CLI gibi bir proje kurulumu ve derleme (build) süreci gerektirir, çünkü router dosyalarınızı ve bileşenlerinizi yönetmek için bu araçlara ihtiyaç duyarsınız.
Temel bir Vue Router yapısı şu adımları içerir:
- Route Bileşenlerini Tanımlama: Her bir URL'ye karşılık gelecek Vue bileşenlerini oluşturursunuz (örneğin, anasayfa için `Home.vue`, hakkımızda sayfası için `About.vue`). Bu bileşenler, önceki konuda gördüğümüz gibi kendi şablonlarına, verilerine, metotlarına sahip olabilir.
- Route Tanımlarını Yapılandırma: Bir dizi (Array) içinde, her bir URL yolunu (`path`) o yola karşılık gelecek bileşenle (`component`) eşleyen route objeleri oluşturursunuz.
- Router Örneği Oluşturma: `createRouter` fonksiyonu ile route tanımlarınızı kullanarak bir router objesi oluşturursunuz. Genellikle tarayıcının geçmiş API'sini kullanan bir history modu (`createWebHistory`) belirtilir.
- Vue Uygulamasına Entegre Etme: Oluşturduğunuz router objesini `app.use(router)` kullanarak ana Vue uygulamasına eklersiniz.
Örnek Temel Yapı (JavaScript Kodları):
JavaScript:
import { createRouter, createWebHistory } from 'vue-router'; // Gerekli fonksiyonları içe aktar
import { createApp } from 'vue'; // Vue 3 için createApp içe aktarımı
// import App from './App.vue'; // Genellikle ana bileşen (Root Component) bu şekilde içe aktarılır (SFC kullanıyorsanız)
// 1. Route Bileşenlerini Tanımlama (Şimdilik basit objeler olarak, gerçekte Component objeleri olur)
// Normalde bu bileşenler ayrı .vue dosyalarında veya JS objeleri olarak tanımlanır
const Home = { template: '<h2>Anasayfa İçeriği</h2><p>Ana sayfaya hoş geldiniz.</p>' };
const About = { template: '<h2>Hakkımızda</h2><p>Bu uygulama hakkında bilgi.</p>' };
const NotFound = { template: '<h2>Sayfa Bulunamadı (404)</h2><p>Aradığınız sayfa mevcut değil.</p>' };
// 2. Route Tanımlarını Yapılandırma
const routes = [
{ path: '/', component: Home }, // '/' yolu Home bileşenini gösterecek
{ path: '/about', component: About }, // '/about' yolu About bileşenini gösterecek
// Tüm eşleşmeyen yolları yakalamak için (404 sayfası) - En sona yazılır
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound } // Vue Router 4 sözdizimi
];
// 3. Router Örneği Oluşturma
const router = createRouter({
// 4. Geçmiş modunu belirleme (HTML5 History API kullanır, URL temiz görünür)
history: createWebHistory(),
routes: routes // Route tanımlarını ata
});
// Ana Vue uygulaması objesini oluşturma
const app = createApp({
// Ana uygulamanın data, methods vb. buraya gelir
});
// Router'ı Vue uygulamasına entegre etme
app.use(router);
// Vue uygulamasını #app elementine bağla
app.mount('#app');
// Artık #app elementi ve içindeki router-view, router tarafından yönetilir4. `router-view` ve `router-link` Kullanımı[/B]
Vue Router kurulduktan sonra, ana Vue uygulamasının şablonunda (`#app` elementi içinde) sağladığı iki global bileşen kullanılır:
- `<router-view>`: O anki URL'ye karşılık gelen route'un bileşeninin görüntüleneceği yer tutucusudur. Ana şablonda sadece bir tane `<router-view>` olur (iç içe rotalar hariç). Bu, uygulamanın dinamik "sayfa içeriği" alanıdır.
- `<router-link to="/path">`: SPA içinde navigasyon linkleri oluşturmak için kullanılır. Bir `<a>` etiketine çevrilir ancak tıklandığında sayfa yenilemesi yapmaz, sadece URL'yi değiştirir ve router'ın ilgili bileşeni `<router-view>` içinde göstermesini sağlar. `to` özelliği, gidilecek dahili yolu belirtir.
Örnek Ana HTML Şablonu (`index.html`):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue SPA Örneği</title>
{# Vue 3 CDN linki (build araçları kullanmıyorsanız) veya projenizin ana JS dosyası #}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
{# Vue Router CDN linki (build araçları kullanmıyorsanız) #}
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
</head>
<body>
{# Vue uygulamasının bağlanacağı HTML elementi #}
<div id="app">
<h1>Basit Vue SPA Uygulaması</h1>
{# Navigasyon Linkleri #}
<nav>
<router-link to="/">Anasayfa</router-link> {# Anasayfa linki #}
|
<router-link to="/about">Hakkımızda</router-link> {# Hakkımızda linki #}
|
<router-link to="/non-existent-page">Olmayan Sayfa</router-link> {# 404 denemesi #}
</nav>
<hr>
{# Eşleşen route bileşeninin render edileceği yer #}
<router-view></router-view>
</div>
[B]<script>[/B]
// Yukarıdaki Vue Router kurulum kodları (createRouter, app.use, app.mount) buraya gelecek
const Home = { template: '<h2>Anasayfa İçeriği</h2><p>Ana sayfaya hoş geldiniz.</p>' };
const About = { template: '<h2>Hakkımızda</h2><p>Bu uygulama hakkında bilgi.</p>' };
const NotFound = { template: '<h2>Sayfa Bulunamadı (404)</h2><p>Aradığınız sayfa mevcut değil.</p>' };
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
];
const router = VueRouter.createRouter({ // VueRouter objesi CDN ile globalde
history: VueRouter.createWebHistory(), // VueRouter objesi CDN ile globalde
routes: routes
});
const app = Vue.createApp({
// Ana uygulama options
});
app.use(router); // Router'ı uygulamaya bağla
app.mount('#app'); // Uygulamayı #app'e bağla
[B]</script>[/B]
</body>
</html>5. Basit Bir SPA Örneği (Home ve About Sayfaları)[/B]
Yukarıdaki kod bir araya geldiğinde, tarayıcınızda açtığınızda "Anasayfa İçeriği"ni göreceksiniz. Navigasyon linklerine tıkladığınızda sayfa yeniden yüklenmeden URL değişecek ve `<router-view>` alanındaki içerik ilgili bileşenin (Hakkımızda veya 404) içeriği ile anında güncellenecektir.
Sıra Sizde![/B]
Vue Router ile Tek Sayfa Uygulamaları dünyasına ilk adımınızı attık.
- Temel bir Vue projesi (Vite veya Vue CLI ile) kurun veya CDN ile deniyorsanız Vue Router CDN linkini ekleyin.
- 2-3 basit Vue bileşeni tanımlayın (template özelliği olan JS objeleri veya SFC'ler). Örneğin Home, About, Contact gibi.
- Bu bileşenleri kullanarak bir `routes` dizisi oluşturun ve `createRouter` ile router örneği oluşturun.
- `app.use(router)` ile router'ı Vue uygulamanıza entegre edin ve uygulamayı bir HTML elementine bağlayın (`app.mount('#app')`).
- Ana HTML şablonunuza `<router-link to="...">` ile navigasyon linkleri ve bir adet `<router-view>` ekleyin.
- Uygulamayı çalıştırın ve linklere tıklayarak sayfa yeniden yüklenmesi olmadan farklı görünümler arasında gezinebildiğinizi doğrulayın. URL'nin değiştiğini gözlemleyin.
- Olmayan bir path'e (örneğin `/asdfgh`) giderek 404 sayfasının (veya belirlediğiniz bileşenin) göründüğünü test edin.
Serinin Geleceği?[/B]
Vue Router ile SPA geliştirmenin temellerini gördük. Bu, modern web uygulamalarının önemli bir özelliğidir.
Seriyi buradan sonra nasıl devam ettirelim?
- Vue Router'da daha ileri konular (Route parametreleri, Dinamik Route Eşleşme, Navigasyon Koruyucuları - Navigation Guards)?
- Vuex veya Pinia ile Merkezi State Management (karmaşık veri yönetimi)?
- Vue bileşenleri içinde API çağrıları yapma (Fetch API veya Axios kullanımı) - Ön yüzü arka yüze bağlama (Client-Side JavaScript ile Web API Tüketimi (Fetch API) konusunu Vue bağlamında uygulama)?
- Vue.js'te daha ileri bileşen konuları (Component local registration, Component Lifecycle Hooks, Slots, Custom Events detayları)?
- Diğer popüler JavaScript Frontend Frameworklerine giriş (React veya Angular temelleri)?
- Veya başka önerileriniz mi var?
Umarım bu konu, modern, akıcı ve Tek Sayfa Uygulamaları geliştirmeye başlarken faydalı olmuştur. Görüşmek üzere!
Bu konu, "Hazır Kod Bankası" serisinin yirmi dokuzuncu parçasıdır ve "Yazılım Bilgi ve Yeni Başlayanlar İçin" kategorisi altında paylaşılmıştır.