Vue Router

Vue Router, Vue.js projelerinde sayfa yönlendirmesi ve gezinme işlemleri için kullanılan resmi bir yönlendirme kütüphanesidir. Bu kütüphane, tek sayfa uygulamalarında (SPA) kullanılmak üzere tasarlanmıştır ve uygulamanın farklı "sayfa" veya "durumlarına" geçiş yapmayı kolaylaştırır. Vue Router, Vue.js projelerinde çok sayfalı bir uygulama gibi davranmasını sağlar, ancak sayfalar arası geçişler tek bir HTML dosyası içinde yapılır.

Vue Router Kurulumu:

Vue CLI kullanarak Vue Router'ı bir projeye eklemek için terminalde şu komutu kullanabilirsiniz

vue create my-project cd my-project vue add router

Bu komutlarla birlikte Vue Router projenize başarıyla eklenmiş olacaktır.

Temel Yönlendirme:

Vue Router kullanarak temel bir yönlendirme:

// src/router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') // Lazy Loading } ]; const router = new VueRouter({ routes }); export default router;

Bu örnekte, iki sayfa (Home ve About) için temel bir yönlendirme tanımlanmıştır. Lazy Loading kullanarak About sayfasının yüklenmesi geciktirilmiştir.

Sayfa Yönlendirmesi:

<!-- src/App.vue --> <template> <div id="app"> <router-link to="/">Ana Sayfa</router-link> <router-link to="/about">Hakkında</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' }; </script> <style> /* Stil tanımlamaları */ </style>

Bu örnekte, ile sayfa yönlendirmesi sağlanmış ve içinde mevcut sayfa gösterilmiştir.

Vue Router'ın temel özellikleri ve kullanımı bu örneklerle anlatılmıştır. Projelerinize uygun olarak yönlendirme konfigürasyonunu ve sayfa geçişlerini özelleştirebilirsiniz.

Parametreler ve Query String'ler

Vue Router ile sayfa yönlendirmelerinde parametreler ve query string'leri kullanmak oldukça yaygındır. Bu, dinamik sayfalar oluşturmanıza ve kullanıcı girişlerini almanıza olanak tanır. İşte Vue Router'da parametreler ve query string'leri nasıl kullanabileceğinize dair bir açıklama:

Parametreler:

Vue Router'da parametreler, URL içindeki belirli bir bölümle eşleşen değerlerdir. Örneğin, kullanıcı profillerini gösteren bir sayfa düşünelim. Bu sayfada kullanıcı adı parametre olarak alınabilir.

Route Tanımlama:

const routes = [ { path: '/user/:username', name: 'UserProfile', component: UserProfile } ];

Link Oluşturma:

<router-link :to="{ name: 'UserProfile', params: { username: 'john_doe' } }">John Doe'nun Profili</router-link> this.$route.params.username; // Bu, "john_doe" değerini döndürecektir

Query String'ler

Query string'leri, URL içindeki "?" karakterinden sonraki veri parçalarını ifade eder. Örneğin, bir arama sayfasında kullanıcının arama terimini query string olarak alalım.

Route Tanımlama:

const routes = [ { path: '/search', name: 'Search', component: Search } ];

Link Oluşturma:

<router-link :to="{ name: 'Search', query: { term: 'Vue.js' } }">Vue.js Ara</router-link>

Query String'i Kullanma:

this.$route.query.term; // Bu, "Vue.js" değerini döndürecektir

Vue Router'da parametreler ve query string'leri kullanarak, dinamik sayfalar oluşturabilir ve kullanıcı girişlerini daha etkili bir şekilde yönetebilirsiniz. Bu, SPA uygulamalarında çok yaygın bir kullanım şeklidir ve Vue Router bunları kolayca yönetebilecek bir yapı sunar.

Programatik Yönlendirmeler

Programatik yönlendirmeler, JavaScript kodu içinde sayfa yönlendirmesi yapmaktır. Vue Router, bu işlemi sağlamak için this.$router.push ve this.$router.replace gibi metodları sunar.

// Programatik yönlendirme örneği methods: { redirectToAboutPage() { this.$router.push('/about'); }, replaceWithHomePage() { this.$router.replace('/'); } }

Router Hook'ları

Router hook'ları, sayfa yönlendirmesi öncesi veya sonrasında belirli işlemleri gerçekleştirmenize olanak tanır. Vue Router, beforeEach, beforeResolve, ve afterEach gibi hook'ları sunar.

beforeEach Hook:

Bu hook, sayfa yönlendirmesi öncesi belirli koşulları kontrol etmek için kullanılır. Örneğin, sayfaya giriş yetkisi kontrolü yapabilirsiniz.

// Örnek beforeEach hook router.beforeEach((to, from, next) => { // Kullanıcı girişi kontrolü if (to.meta.requiresAuth && !auth.isAuthenticated) { next('/login'); } else { next(); // Sayfa yönlendirmesine izin ver } });

beforeResolve Hook:

// Örnek beforeResolve hook router.beforeResolve((to, from, next) => { // Bazı işlemler next(); // Sayfa yönlendirmesine izin ver });

afterEach Hook:

Bu hook, sayfa yönlendirmesi tamamlandıktan sonra çalışır. Genellikle, sayfa değişikliği sonrasında bazı işlemleri gerçekleştirmek için kullanılır.

// Örnek afterEach hook router.afterEach((to, from) => { // Sayfa değişikliği sonrası işlemler });

Bu hook'lar, sayfa yönlendirmelerini kontrol etmek, kullanıcı yetkilendirmesi yapmak veya sayfa geçişleri sırasında çeşitli işlemleri gerçekleştirmek için kullanışlıdır.