Vue.js, modern ve interaktif kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Tek Sayfal\u0131 Uygulamalar (Single Page Applications – SPA) \u00e7a\u011f\u0131nda, kullan\u0131c\u0131lar\u0131n farkl\u0131 g\u00f6r\u00fcn\u00fcmler aras\u0131nda sorunsuz bir \u015fekilde gezinmesini sa\u011flamak, herhangi bir web uygulamas\u0131n\u0131n temel bir gereksinimidir. \u0130\u015fte bu noktada y\u00f6nlendirme (routing) devreye girer. Y\u00f6nlendirme, uygulaman\u0131n URL’sine g\u00f6re farkl\u0131 bile\u015fenleri veya g\u00f6r\u00fcn\u00fcmleri g\u00f6r\u00fcnt\u00fclemesini sa\u011flayan mekanizmad\u0131r. Vue.js ekosisteminde bu g\u00f6revi \u00fcstlenen resmi k\u00fct\u00fcphane ise Vue Router’d\u0131r. Bu makalede, Vue Router’\u0131n temellerini, kurulumunu, temel ve geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Tek Sayfal\u0131 Uygulamalar (SPA’lar), geleneksel \u00e7ok sayfal\u0131 uygulamalar\u0131n aksine, t\u00fcm uygulaman\u0131n tek bir HTML sayfas\u0131nda y\u00fcklendi\u011fi ve i\u00e7eriklerin dinamik olarak JavaScript ile de\u011fi\u015ftirildi\u011fi modern web geli\u015ftirme paradigmas\u0131n\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r. Bu yakla\u015f\u0131m, sayfa yenilemeleri olmadan h\u0131zl\u0131 ve ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar. Ancak SPA’larda, taray\u0131c\u0131n\u0131n adres \u00e7ubu\u011fundaki URL’nin uygulaman\u0131n mevcut durumunu yans\u0131tmas\u0131 ve kullan\u0131c\u0131lar\u0131n belirli bir g\u00f6r\u00fcn\u00fcme do\u011frudan eri\u015febilmesi veya taray\u0131c\u0131 ge\u00e7mi\u015fini kullanarak geri\/ileri gidebilmesi i\u00e7in bir y\u00f6nlendirme mekanizmas\u0131na ihtiya\u00e7 duyulur. Vue Router, Vue.js ile geli\u015ftirilen SPA’lar i\u00e7in bu ihtiyac\u0131 kar\u015f\u0131layan g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcmd\u00fcr. Kullan\u0131c\u0131 dostu API’si ve Vue’nun reaktif do\u011fas\u0131yla m\u00fckemmel entegrasyonu sayesinde, karma\u015f\u0131k y\u00f6nlendirme senaryolar\u0131n\u0131 bile basit ve anla\u015f\u0131l\u0131r bir \u015fekilde y\u00f6netmeyi m\u00fcmk\u00fcn k\u0131lar.<\/p>\n
Vue Router, Vue.js uygulamalar\u0131 i\u00e7in resmi y\u00f6nlendirme k\u00fct\u00fcphanesidir. Uygulaman\u0131z\u0131n farkl\u0131 URL yollar\u0131na (paths) g\u00f6re hangi Vue bile\u015fenlerinin g\u00f6sterilece\u011fini belirlemenizi sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n bir web sitesinde gezinirken farkl\u0131 sayfalar (asl\u0131nda farkl\u0131 bile\u015fen g\u00f6r\u00fcn\u00fcmleri) aras\u0131nda ge\u00e7i\u015f yapmas\u0131na olanak tan\u0131r. Vue Router, client-side routing prensibiyle \u00e7al\u0131\u015f\u0131r; yani y\u00f6nlendirme i\u015flemleri sunucu taraf\u0131nda de\u011fil, taray\u0131c\u0131da JavaScript arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. Bu, her rota de\u011fi\u015fti\u011finde sunucuya tam bir sayfa iste\u011fi g\u00f6ndermek yerine, sadece gerekli bile\u015fenlerin dinamik olarak y\u00fcklenip de\u011fi\u015ftirilmesi anlam\u0131na gelir, bu da daha h\u0131zl\u0131 ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n
* Server-Side Routing:<\/strong> Geleneksel web uygulamalar\u0131nda, her URL iste\u011fi sunucuya g\u00f6nderilir ve sunucu, istenen kayna\u011f\u0131 (genellikle tam bir HTML sayfas\u0131) geri d\u00f6nd\u00fcr\u00fcr. Bu, her navigasyonda sayfan\u0131n tamamen yeniden y\u00fcklenmesine neden olur. Vue Router, y\u00f6nlendirme ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamak i\u00e7in bir dizi g\u00fc\u00e7l\u00fc \u00f6zellik sunar: Vue Router’\u0131 bir Vue.js projesine entegre etmek olduk\u00e7a basittir. \u00d6ncelikle bir Vue projesi olu\u015fturman\u0131z gerekir. Bunu Vue CLI veya Vite gibi ara\u00e7larla yapabilirsiniz.<\/p>\n E\u011fer Vue Router’\u0131 proje olu\u015fturma s\u0131ras\u0131nda eklemediyseniz veya mevcut bir projeye eklemek istiyorsan\u0131z:<\/p>\n Vue Router’\u0131 kullanmaya ba\u015flamak i\u00e7in bir router \u00f6rne\u011fi olu\u015fturman\u0131z gerekir. Bu genellikle Burada Olu\u015fturdu\u011funuz router \u00f6rne\u011fini Vue uygulaman\u0131zla ba\u011flaman\u0131z gerekir. Bu genellikle Vue Router, y\u00f6nlendirme i\u00e7in iki global bile\u015fen sa\u011flar:
\n* Client-Side Routing:<\/strong> SPA’larda, ba\u015flang\u0131\u00e7ta t\u00fcm uygulaman\u0131n HTML, CSS ve JavaScript kaynaklar\u0131 y\u00fcklenir. Sonraki navigasyonlar i\u00e7in sunucuya tam sayfa iste\u011fi yap\u0131lmaz. Bunun yerine, JavaScript taray\u0131c\u0131n\u0131n URL’sini de\u011fi\u015ftirir (genellikle History API veya hash modu kullanarak) ve URL’ye kar\u015f\u0131l\u0131k gelen bile\u015feni dinamik olarak DOM’a enjekte eder. Vue Router da bu prensiple \u00e7al\u0131\u015f\u0131r.<\/p>\nVue Router’\u0131n Temel \u00d6zellikleri<\/h4>\n
\n* \u0130\u00e7 \u0130\u00e7e Rotalar (Nested Routes):<\/strong> Bir ana bile\u015fenin i\u00e7inde alt rotalar tan\u0131mlayarak daha karma\u015f\u0131k UI yap\u0131lar\u0131 olu\u015fturma.
\n* Dinamik Rotalar (Dynamic Route Matching):<\/strong> URL’deki de\u011fi\u015fken par\u00e7alar\u0131 (\u00f6rne\u011fin \/users\/:id<\/code>) yakalayarak ayn\u0131 bile\u015feni farkl\u0131 verilerle kullanma.
\n* Programatik Navigasyon:<\/strong> Kullan\u0131c\u0131 etkile\u015fimlerine veya uygulama mant\u0131\u011f\u0131na g\u00f6re JavaScript kodu arac\u0131l\u0131\u011f\u0131yla y\u00f6nlendirme yapma.
\n* Y\u00f6nlendirme Korumalar\u0131 (Navigation Guards):<\/strong> Bir rotaya eri\u015fmeden \u00f6nce veya rotadan ayr\u0131l\u0131rken belirli ko\u015fullar\u0131 kontrol etme (\u00f6rne\u011fin kimlik do\u011frulama).
\n* \u0130simlendirilmi\u015f Rotalar (Named Routes):<\/strong> Rotalara isim vererek, URL yollar\u0131 de\u011fi\u015fse bile navigasyonu kolayla\u015ft\u0131rma.
\n* \u0130simlendirilmi\u015f G\u00f6r\u00fcn\u00fcmler (Named Views):<\/strong> Ayn\u0131 anda birden fazla router-view<\/code> \u00f6rne\u011fini kullanarak karma\u015f\u0131k layout’lar olu\u015fturma.
\n* Y\u00f6nlendirme Ge\u00e7i\u015fleri (Route Transitions):<\/strong> Rota de\u011fi\u015fikliklerinde animasyonlar ekleme.
\n* Tembel Y\u00fckleme (Lazy Loading):<\/strong> Rota bile\u015fenlerini yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fckleyerek uygulaman\u0131n ba\u015flang\u0131\u00e7 performans\u0131n\u0131 iyile\u015ftirme.<\/p>\nKurulum ve Temel Kullan\u0131m<\/h3>\n
Proje Olu\u015fturma (Vite ile \u00d6rnek)<\/h4>\n
npm create vue@latest\nProje ad\u0131n\u0131 girin, Vue Router'\u0131 eklemek isteyip istemedi\u011finizi sorunca 'Yes' se\u00e7in.<\/h2>\ncd my-vue-app\nnpm install\nnpm run dev<\/code><\/pre>\n
Vue Router’\u0131 Y\u00fckleme<\/h4>\n
npm install vue-router@4 # Vue 3 i\u00e7in\nveya<\/h2>\nyarn add vue-router@4<\/code><\/pre>\n
Router \u00d6rne\u011fi Olu\u015fturma<\/h4>\n
src\/router\/index.js<\/code> gibi ayr\u0131 bir dosyada yap\u0131l\u0131r.<\/p>\n\/\/ src\/router\/index.js\nimport { createRouter, createWebHistory } from 'vue-router';\nimport HomeView from '..\/views\/HomeView.vue';\nimport AboutView from '..\/views\/AboutView.vue';\n\nconst routes = [\n {\n path: '\/',\n name: 'home',\n component: HomeView\n },\n {\n path: '\/about',\n name: 'about',\n component: AboutView\n }\n];\n\nconst router = createRouter({\n history: createWebHistory(import.meta.env.BASE_URL),\n routes\n});\n\nexport default router;<\/code><\/pre>\ncreateRouter<\/code> fonksiyonu ile bir router \u00f6rne\u011fi olu\u015fturulur. history<\/code> \u00f6zelli\u011fi, y\u00f6nlendirme modunu belirler. createWebHistory<\/code> HTML5 History API’sini kullanarak temiz URL’ler (\u00f6rne\u011fin \/users\/1<\/code>) sa\u011flar. createWebHashHistory<\/code> ise hash tabanl\u0131 URL’ler (\u00f6rne\u011fin \/#\/users\/1<\/code>) kullan\u0131r, bu da daha eski taray\u0131c\u0131larla uyumluluk i\u00e7in veya sunucu yap\u0131land\u0131rmas\u0131 gerektirmeyen durumlar i\u00e7in faydal\u0131d\u0131r. routes<\/code> dizisi ise uygulaman\u0131zdaki t\u00fcm rota tan\u0131mlar\u0131n\u0131 i\u00e7erir. Her rota objesi path<\/code>, name<\/code> ve component<\/code> gibi \u00f6zelliklere sahiptir.<\/p>\nUygulamay\u0131 Router ile Ba\u011flama<\/h4>\n
src\/main.js<\/code> dosyas\u0131nda yap\u0131l\u0131r.<\/p>\n\/\/ src\/main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router'; \/\/ Olu\u015fturdu\u011fumuz router'\u0131 import ediyoruz\n\nconst app = createApp(App);\n\napp.use(router); \/\/ Vue uygulamas\u0131n\u0131 router ile kullanacak \u015fekilde yap\u0131land\u0131r\u0131yoruz\n\napp.mount('#app');<\/code><\/pre>\napp.use(router)<\/code> \u00e7a\u011fr\u0131s\u0131, router \u00f6rne\u011fini Vue uygulaman\u0131za enjekte eder ve t\u00fcm bile\u015fenlerde this.$router<\/code> ve this.$route<\/code> (Composition API’da useRouter<\/code> ve useRoute<\/code>) gibi \u00f6zelliklere eri\u015fim sa\u011flar.<\/p>\nrouter-link<\/code> ve router-view<\/code> Bile\u015fenleri<\/h4>\n
\n* <\/code> etiketi gibi \u00e7al\u0131\u015f\u0131r ancak Vue Router taraf\u0131ndan y\u00f6netilen y\u00f6nlendirme i\u015flemleri i\u00e7in kullan\u0131l\u0131r. T\u0131kland\u0131\u011f\u0131nda sayfa yenilemesi olmadan rotay\u0131 de\u011fi\u015ftirir.
\n* \n\n