Vue.js ile Tek Sayfa Uygulamaları (SPA): Gelişmiş Yönlendirme

Vue.js ile Tek Sayfa Uygulamaları (SPA): Gelişmiş Yönlendirme

Tek bir HTML sayfası üzerinden zengin ve etkileşimli web uygulamaları geliştirmek istiyorsunuz, ancak sayfa yenileme olmadan farklı bölümlere geçiş yapmanın yolunu arıyorsunuz. İşte tam bu noktada Vue.js’in güçlü yönlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalarınıza sorunsuz ve performanslı yönlendirme eklemeyi adım adım öğreneceksiniz. Bu, kullanıcı deneyimini iyileştirmenin yanı sıra, uygulamanızın SEO performansını da artıracaktır.

Vue Router Nedir ve Neden Kullanmalıyız?

Vue Router, Vue.js için resmi bir yönlendirme kütüphanesidir. Tek sayfa uygulamalarında (SPA) farklı bileşenler arasında gezinmeyi kolaylaştırır, URL’leri yönetir ve kullanıcı deneyimini geliştirir. Sayfa yenilemesi olmadan geçişler sağlar, böylece uygulamanız daha hızlı ve daha duyarlı hale gelir. Ayrıca, arama motorlarının uygulamanızın içeriğini indekslemesini kolaylaştırarak SEO performansına da katkıda bulunur. Kısacası, Vue ile geliştirdiğiniz her SPA için olmazsa olmaz bir araçtır.

Vue Router’ı Kurmak Nasıl Yapılır?

Öncelikle, yeni bir Vue projesi oluşturmanız veya mevcut projenize Vue Router’ı eklemeniz gerekmektedir. vue-cli kullanarak yeni bir proje oluşturursanız, yönlendirmeyi projeye dahil etmek oldukça basittir. vue create my-vue-spa komutu ile yeni bir proje oluştururken, “Manually select features” seçeneğini tercih ederek Vue Router’ı seçebilirsiniz. Mevcut bir projede ise, aşağıdaki komutu kullanarak vue-router paketini kurabilirsiniz:

bash
npm install vue-router

Veya Yarn kullanıyorsanız:

bash
yarn add vue-router

Temel Bir Vue Router Uygulaması Nasıl Oluşturulur?

Kurulumdan sonra, yönlendirme sistemini yapılandırmanız gerekmektedir. Genellikle, main.js dosyanızda yönlendiricinizi oluşturursunuz. İşte basit bir örnek:

javascript
import { createApp } from ‘vue’
import App from ‘./App.vue’
import { createRouter, createWebHistory } from ‘vue-router’
import Home from ‘./components/Home.vue’
import About from ‘./components/About.vue’
import Contact from ‘./components/Contact.vue’

const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
{ path: ‘/contact’, component: Contact },
];

const router = createRouter({
history: createWebHistory(),
routes,
});

const app = createApp(App);
app.use(router);
app.mount(‘#app’);

Bu kod, üç farklı rota (/, /about, /contact) tanımlar ve her birine karşılık gelen bileşenleri (Home, About, Contact) atar. createWebHistory() yöntemi, tarayıcı geçmişini kullanarak URL’leri yönetir. createRouter fonksiyonu ile oluşturulan router instance’ı, createApp fonksiyonuna use metodu ile eklenir.

Ardından, Home.vue, About.vue ve Contact.vue gibi bileşenleri oluşturmanız ve içeriklerini eklemeniz gerekir. Bu bileşenler, yönlendirme sisteminizin hedef noktaları olacaktır. Örneğin, Home.vue dosyası aşağıdaki gibi olabilir:

vue

Daha Gelişmiş Yönlendirme Teknikleri Nelerdir?

Temel yönlendirmenin ötesinde, Vue Router daha gelişmiş özellikleri de sunar. Örneğin, **parametreli rotalar** ile dinamik içerik gösterebilirsiniz:

javascript
const routes = [
{ path: ‘/user/:id’, component: User }, // :id bir parametredir
];

Bu örnekte, /user/123 gibi bir rotaya erişildiğinde, User bileşenine $route.params.id ile 123 değeri geçirilecektir. Ayrıca, **yönlendirme koruması** ile yetkisiz kullanıcıların belirli rotalara erişimini engelleyebilirsiniz. Bunun için, beforeEnter hook’unu kullanabilirsiniz. Daha detaylı bilgi için bu rehberi inceleyebilirsiniz.

Nested Routes (İç İçe Rotalar) Nasıl Kullanılır?

Karmaşık uygulamalar için, iç içe geçmiş rotalar (nested routes) kullanışlıdır. Bu, hiyerarşik bir yapı oluşturmanıza ve uygulamanızı daha düzenli hale getirmenize olanak tanır. İşte bir örnek:

javascript
const routes = [
{
path: ‘/admin’,
component: Admin,
children: [
{ path: ‘users’, component: AdminUsers },
{ path: ‘products’, component: AdminProducts },
]
}
];

Bu örnekte, /admin rotası altında /admin/users ve /admin/products rotaları bulunur. Bu sayede, admin paneli gibi bir alanda alt bölümler oluşturabilirsiniz.

Programatik Navigasyon Nasıl Yapılır?

Bazen, kullanıcı etkileşimi olmadan programatik olarak yönlendirme yapmanız gerekebilir. Bunun için, router.push() metodu kullanılır:

javascript
this.$router.push(‘/about’); // ‘/about’ rotasına yönlendirme

Bu kod, this.$router nesnesi aracılığıyla /about rotasına yönlendirme yapar. router.replace() metodu ise mevcut rota geçmişini silerek yönlendirme yapar.

İleri Düzey Konular: Lazy Loading ve Middleware

Uygulamanızın performansını optimize etmek için, **lazy loading** tekniğini kullanabilirsiniz. Bu teknik, bileşenleri yalnızca gerektiğinde yükler, böylece ilk yükleme süresi kısalır. Bunun için, component yerine () => import(‘./components/MyComponent.vue’) şeklinde bir fonksiyon kullanabilirsiniz. Ayrıca, **middleware** kullanarak rotalarınız için ek güvenlik ve kontrol mekanizmaları ekleyebilirsiniz. Daha fazla bilgi için Vue Router’ın resmi dökümanlarına göz atabilirsiniz.

Sonuç

Bu rehberde, Vue Router kullanarak Vue.js uygulamalarınıza yönlendirme eklemeyi öğrendiniz. Temel rotalardan karmaşık hiyerarşik yapılara kadar, Vue Router’ın sunduğu birçok özelliği inceledik. Lazy loading ve middleware gibi ileri düzey konularla uygulamanızın performansını ve güvenliğini artırabilirsiniz. Unutmayın ki, Vue Router’ın güçlü yönlendirme sistemi, daha iyi kullanıcı deneyimi ve SEO performansı için oldukça önemlidir. Daha fazla bilgi ve örnek proje için Fatih Soysal’ın web sitesini ziyaret edebilirsiniz.

Sıkça Sorulan Sorular

• Vue Router’ı hangi proje türlerinde kullanmalıyım? Tek sayfa uygulamaları (SPA) geliştirdiğinizde Vue Router kullanmalısınız.
• Parametreli rotalar nasıl çalışır? Parametreli rotalarda, URL’de değişken değerler kullanabilirsiniz. Bu değerler, ilgili bileşen içinde $route.params nesnesi aracılığıyla erişilebilir.
• Lazy loading’in faydaları nelerdir? Lazy loading, ilk yükleme süresini azaltarak uygulamanızın performansını artırır.
• Navigation guards (geçiş korumaları) nedir? Navigation guards, bir rotaya geçiş yapmadan önce belirli koşulların kontrol edilmesini sağlar.
• Vue Router’ın resmi dökümanlarına nasıl ulaşabilirim? Vue Router’ın resmi dökümanlarına Vue.js resmi web sitesinden ulaşabilirsiniz.

Yazar: Fatih Soysal