{"id":36682,"date":"2025-12-21T15:40:43","date_gmt":"2025-12-21T12:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36682"},"modified":"2025-12-21T15:40:43","modified_gmt":"2025-12-21T12:40:43","slug":"vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/","title":{"rendered":"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<h2>Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber<\/h2>\n<p>Tek sayfal\u0131k uygulamalar\u0131n (Single Page Applications &#8211; SPA) geli\u015ftirilmesinde, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn farkl\u0131 b\u00f6l\u00fcmlerine dinamik olarak eri\u015fim sa\u011flamak ve y\u00f6netmek kritik bir \u00f6neme sahiptir. Vue.js ekosisteminde bu g\u00f6revi \u00fcstlenen ana ara\u00e7 Vue Router&#8217;d\u0131r. Vue Router, uygulaman\u0131z\u0131n farkl\u0131 URL&#8217;ler aras\u0131nda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flarken, ayn\u0131 zamanda karma\u015f\u0131k UI yap\u0131lar\u0131n\u0131 d\u00fczenlemenize olanak tan\u0131r. Bu d\u00fczenleme yeteneklerinin en g\u00fc\u00e7l\u00fclerinden biri de &#8220;i\u00e7 i\u00e7e (nested) rotalar&#8221; konseptidir.<\/p>\n<p>\u0130\u00e7 i\u00e7e rotalar, bir ana (parent) rotan\u0131n alt\u0131nda birden fazla alt (child) rotan\u0131n tan\u0131mlanmas\u0131yla olu\u015fan hiyerar\u015fik bir yap\u0131 sunar. Bu yap\u0131, \u00f6zellikle bir ana bile\u015fenin kendi i\u00e7inde farkl\u0131 alt g\u00f6r\u00fcn\u00fcmleri bar\u0131nd\u0131rmas\u0131 gereken senaryolarda devreye girer. \u00d6rne\u011fin, bir kullan\u0131c\u0131 profil sayfas\u0131 d\u00fc\u015f\u00fcn\u00fcn: bu sayfa &#8220;Profil Bilgileri&#8221;, &#8220;G\u00f6nderiler&#8221; ve &#8220;Ayarlar&#8221; gibi farkl\u0131 sekmelere sahip olabilir. Bu sekmelerin her biri, ana profil sayfas\u0131n\u0131n bir alt rotas\u0131 olarak tan\u0131mlanabilir ve ana profil sayfas\u0131n\u0131n d\u00fczenini (header, sidebar vb.) korurken sadece i\u00e7erik alan\u0131n\u0131 de\u011fi\u015ftirebilir. Bu yakla\u015f\u0131m, kodun daha d\u00fczenli olmas\u0131n\u0131, bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini art\u0131rmas\u0131n\u0131 ve uygulaman\u0131n genel mimarisini daha anla\u015f\u0131l\u0131r k\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Bu makalede, Vue.js&#8217;te i\u00e7 i\u00e7e rotalar\u0131n ne oldu\u011funu, neden kullan\u0131ld\u0131\u011f\u0131n\u0131, nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l uyguland\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Ayr\u0131ca, bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi kullan\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz yayg\u0131n durumlar\u0131, en iyi uygulamalar\u0131 ve ipu\u00e7lar\u0131n\u0131 da inceleyece\u011fiz.<\/p>\n<h3>\u0130\u00e7 \u0130\u00e7e Rotalar Nedir ve Neden Kullan\u0131l\u0131r?<\/h3>\n<p>\u0130\u00e7 i\u00e7e rotalar, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bir rotan\u0131n ba\u015fka bir rotay\u0131 i\u00e7ermesi durumudur. Vue Router&#8217;da bu, bir ana rotan\u0131n <code>children<\/code> \u00f6zelli\u011fini kullanarak tan\u0131mlan\u0131r. Bu \u00f6zellik, ana rotan\u0131n alt\u0131nda, kendi URL yollar\u0131na ve bile\u015fenlerine sahip alt rotalar\u0131n bir dizisini bar\u0131nd\u0131r\u0131r.<\/p>\n<p><strong>\u00d6rnek Bir Senaryo:<\/strong><br \/>\nBir e-ticaret uygulamas\u0131nda &#8220;\u00dcr\u00fcnler&#8221; b\u00f6l\u00fcm\u00fc oldu\u011funu varsayal\u0131m. Bu b\u00f6l\u00fcm\u00fcn alt\u0131nda &#8220;T\u00fcm \u00dcr\u00fcnler&#8221;, &#8220;Kategoriye G\u00f6re \u00dcr\u00fcnler&#8221; ve &#8220;\u00dcr\u00fcn Detay\u0131&#8221; gibi alt b\u00f6l\u00fcmler olabilir.<br \/>\n&#8211; <code>\/products<\/code> (Ana rota, t\u00fcm \u00fcr\u00fcnleri listeleyen bir d\u00fczeni g\u00f6sterir)<br \/>\n  &#8211; <code>\/products\/all<\/code> (T\u00fcm \u00fcr\u00fcnlerin listesi)<br \/>\n  &#8211; <code>\/products\/category\/:categoryId<\/code> (Belirli bir kategoriye ait \u00fcr\u00fcnler)<br \/>\n  &#8211; <code>\/products\/:productId<\/code> (Belirli bir \u00fcr\u00fcn\u00fcn detay sayfas\u0131)<\/p>\n<p>Bu yap\u0131da, <code>\/products<\/code> rotas\u0131 bir ana bile\u015feni (\u00f6rne\u011fin <code>ProductsLayout.vue<\/code>) y\u00fckler. Bu ana bile\u015fen, kendi i\u00e7inde bir <code><router-view><\/code> etiketine sahip olacakt\u0131r. <code>\/products\/all<\/code> gibi alt rotalara gidildi\u011finde, bu alt rotalar\u0131n bile\u015fenleri (\u00f6rne\u011fin <code>AllProducts.vue<\/code>) ana bile\u015fenin <code><router-view><\/code> etiketi i\u00e7ine render edilir. B\u00f6ylece, ana bile\u015fenin etraf\u0131ndaki men\u00fc, ba\u015fl\u0131k veya filtreleme alan\u0131 gibi ortak UI \u00f6\u011feleri korunurken sadece i\u00e7 k\u0131s\u0131m de\u011fi\u015fir.<\/p>\n<p><strong>\u0130\u00e7 \u0130\u00e7e Rotalar\u0131 Kullanman\u0131n Avantajlar\u0131:<\/strong><\/p>\n<p>1.  <strong>UI Organizasyonu ve Hiyerar\u015fisi:<\/strong> Uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc mant\u0131ksal bir hiyerar\u015fi i\u00e7inde d\u00fczenlemenizi sa\u011flar. Bu, karma\u015f\u0131k aray\u00fczlerin daha y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<br \/>\n2.  <strong>Payla\u015f\u0131lan D\u00fczenler (Shared Layouts):<\/strong> Bir ana bile\u015fen, alt rotalar aras\u0131nda payla\u015f\u0131lacak bir d\u00fczen (layout) sa\u011flayabilir. Bu, ba\u015fl\u0131k \u00e7ubu\u011fu, kenar \u00e7ubu\u011fu, alt bilgi gibi ortak UI \u00f6\u011felerinin her alt rota i\u00e7in tekrar tekrar tan\u0131mlanmas\u0131n\u0131 \u00f6nler.<br \/>\n3.  <strong>Bile\u015fen Yeniden Kullan\u0131labilirli\u011fi:<\/strong> Ortak bir d\u00fczeni payla\u015fan alt rotalar, daha mod\u00fcler ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturmay\u0131 te\u015fvik eder.<br \/>\n4.  <strong>Veri Ge\u00e7i\u015fi ve Parametre Y\u00f6netimi:<\/strong> Ana rotadan alt rotalara parametrelerin ge\u00e7i\u015fi daha do\u011fal bir \u015fekilde ger\u00e7ekle\u015febilir. \u00d6rne\u011fin, bir <code>userId<\/code> parametresi ana rotada tan\u0131mlan\u0131p, t\u00fcm alt rotalar taraf\u0131ndan kullan\u0131labilir.<br \/>\n5.  <strong>Kod Bak\u0131m\u0131 ve Okunabilirlik:<\/strong> Rota tan\u0131mlar\u0131n\u0131 ve bile\u015fen yap\u0131lar\u0131n\u0131 daha d\u00fczenli hale getirerek kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<br \/>\n6.  <strong>Geli\u015ftirici Deneyimi:<\/strong> Geli\u015ftiricilerin, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin nas\u0131l ili\u015fkili oldu\u011funu ve hangi bile\u015fenlerin hangi ba\u011flamda render edildi\u011fini daha kolay anlamalar\u0131na yard\u0131mc\u0131 olur.<\/p>\n<h3>Vue Router Kurulumu ve Temel Yap\u0131land\u0131rma<\/h3>\n<p>\u0130\u00e7 i\u00e7e rotalar\u0131 kullanmaya ba\u015flamadan \u00f6nce, Vue Router&#8217;\u0131n projenizde kurulu ve temel olarak yap\u0131land\u0131r\u0131lm\u0131\u015f olmas\u0131 gerekir.<\/p>\n<p><strong>1. Vue Router Kurulumu:<\/strong><br \/>\nProjenize Vue Router&#8217;\u0131 npm veya yarn ile y\u00fckleyin:<\/p>\n<pre><code class=\"language-bash\">npm install vue-router@4\n<h2>veya<\/h2>\nyarn add vue-router@4<\/code><\/pre>\n<p>Bu komut Vue 3 ile uyumlu Vue Router v4&#8217;\u00fc y\u00fckleyecektir.<\/p>\n<p><strong>2. Router Dosyas\u0131n\u0131 Olu\u015fturma:<\/strong><br \/>\nGenellikle <code>src\/router\/index.js<\/code> yolunda bir router yap\u0131land\u0131rma dosyas\u0131 olu\u015fturulur.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/router\/index.js\nimport { createRouter, createWebHistory } from 'vue-router';\nimport HomeView from '..\/views\/HomeView.vue'; \/\/ \u00d6rnek ana sayfa bile\u015feni\n\nconst routes = [\n  {\n    path: '\/',\n    name: 'home',\n    component: HomeView\n  }\n];\n\nconst router = createRouter({\n  history: createWebHistory(process.env.BASE_URL),\n  routes\n});\n\nexport default router;<\/code><\/pre>\n<p><strong>3. Vue Uygulamas\u0131na Entegre Etme:<\/strong><br \/>\n<code>src\/main.js<\/code> dosyas\u0131nda router&#8217;\u0131 Vue uygulaman\u0131za ekleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/main.js\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport router from '.\/router'; \/\/ Olu\u015fturdu\u011fumuz router'\u0131 import et\n\ncreateApp(App).use(router).mount('#app');<\/code><\/pre>\n<p><strong>4. <code>App.vue<\/code>&#8216;de <code><router-view><\/code>:<\/strong><br \/>\nUygulaman\u0131z\u0131n ana bile\u015feni olan <code>App.vue<\/code> i\u00e7inde, rotalar\u0131n bile\u015fenlerinin render edilece\u011fi yeri belirtmek i\u00e7in <code><router-view><\/code> etiketini kullan\u0131n:<\/p>\n<pre><code class=\"language-html\"><!-- src\/App.vue -->\n<template>\n  <nav>\n    <router-link to=\"\/\">Ana Sayfa<\/router-link> |\n    <!-- Di\u011fer ana rotalar buraya eklenecek -->\n  <\/nav>\n  <router-view\/>\n<\/template><\/code><\/pre>\n<p>Bu temel kurulum tamamland\u0131ktan sonra, i\u00e7 i\u00e7e rotalar\u0131 tan\u0131mlamaya ba\u015flayabiliriz.<\/p>\n<h3>\u0130\u00e7 \u0130\u00e7e Rotalar\u0131 Ad\u0131m Ad\u0131m Uygulama<\/h3>\n<p>\u015eimdi, bir kullan\u0131c\u0131 profili \u00f6rne\u011fi \u00fczerinden i\u00e7 i\u00e7e rotalar\u0131n nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyelim.<\/p>\n<p><strong>Senaryo:<\/strong><br \/>\nBir kullan\u0131c\u0131 profili sayfas\u0131 (<code>\/users\/:id<\/code>) a\u015fa\u011f\u0131daki alt sekmelere sahip olacak:<br \/>\n&#8211; <code>\/users\/:id<\/code> (Varsay\u0131lan olarak kullan\u0131c\u0131 profil bilgilerini g\u00f6sterir)<br \/>\n&#8211; <code>\/users\/:id\/posts<\/code> (Kullan\u0131c\u0131n\u0131n g\u00f6nderilerini g\u00f6sterir)<br \/>\n&#8211; <code>\/users\/:id\/settings<\/code> (Kullan\u0131c\u0131 ayarlar\u0131n\u0131 g\u00f6sterir)<\/p>\n<p><strong>1. Bile\u015fenleri Olu\u015fturma:<\/strong><\/p>\n<p>\u00d6ncelikle gerekli bile\u015fenleri olu\u015ftural\u0131m.<\/p>\n<p><strong>a. Ana Bile\u015fen (Parent Component): <code>UserLayout.vue<\/code><\/strong><br \/>\nBu bile\u015fen, kullan\u0131c\u0131 profilinin genel d\u00fczenini sa\u011flayacak ve alt rotalar\u0131n render edilece\u011fi <code><router-view><\/code>&#8216;i i\u00e7erecektir. Ayr\u0131ca, alt rotalar aras\u0131nda gezinmek i\u00e7in <code><router-link><\/code>&#8216;leri de bar\u0131nd\u0131racakt\u0131r.<\/p>\n<pre><code class=\"language-html\"><!-- src\/views\/UserLayout.vue -->\n<template>\n  <div class=\"user-layout\">\n    <h2>Kullan\u0131c\u0131 Profili: {{ $route.params.id }}<\/h2>\n    <nav class=\"user-nav\">\n      <router-link :to=\"{ name: 'user-profile', params: { id: $route.params.id } }\">Profil Bilgileri<\/router-link> |\n      <router-link :to=\"{ name: 'user-posts', params: { id: $route.params.id } }\">G\u00f6nderiler<\/router-link> |\n      <router-link :to=\"{ name: 'user-settings', params: { id: $route.params.id } }\">Ayarlar<\/router-link>\n    <\/nav>\n    <div class=\"user-content\">\n      <!-- Alt rotalar\u0131n bile\u015fenleri burada render edilecek -->\n      <router-view\/>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'UserLayout'\n}\n<\/script>\n\n<style scoped>\n.user-layout {\n  border: 1px solid #ccc;\n  padding: 20px;\n  margin: 20px;\n  background-color: #f9f9f9;\n}\n.user-nav a {\n  margin-right: 10px;\n  text-decoration: none;\n  color: #333;\n}\n.user-nav a.router-link-active {\n  font-weight: bold;\n  color: #007bff;\n}\n.user-content {\n  margin-top: 20px;\n  padding: 15px;\n  border: 1px dashed #eee;\n  background-color: #fff;\n}\n<\/style><\/code><\/pre>\n<p><strong>b. Alt Bile\u015fenler (Child Components):<\/strong><\/p>\n<pre><code class=\"language-html\"><!-- src\/views\/UserProfile.vue -->\n<template>\n  <div>\n    <h3>Profil Bilgileri<\/h3>\n    <p>Kullan\u0131c\u0131 ID: {{ $route.params.id }}<\/p>\n    <p>Bu alanda kullan\u0131c\u0131n\u0131n genel profil bilgileri g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'UserProfile'\n}\n<\/script><\/code><\/pre>\n<pre><code class=\"language-html\"><!-- src\/views\/UserPosts.vue -->\n<template>\n  <div>\n    <h3>Kullan\u0131c\u0131 G\u00f6nderileri<\/h3>\n    <p>Kullan\u0131c\u0131 ID: {{ $route.params.id }}<\/p>\n    <p>Bu alanda kullan\u0131c\u0131n\u0131n yapt\u0131\u011f\u0131 g\u00f6nderiler listelenecektir.<\/p>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'UserPosts'\n}\n<\/script><\/code><\/pre>\n<pre><code class=\"language-html\"><!-- src\/views\/UserSettings.vue -->\n<template>\n  <div>\n    <h3>Kullan\u0131c\u0131 Ayarlar\u0131<\/h3>\n    <p>Kullan\u0131c\u0131 ID: {{ $route.params.id }}<\/p>\n    <p>Bu alanda kullan\u0131c\u0131n\u0131n hesap ayarlar\u0131 y\u00f6netilecektir.<\/p>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'UserSettings'\n}\n<\/script><\/code><\/pre>\n<p><strong>2. Rotalar\u0131 Yap\u0131land\u0131rma (<code>router\/index.js<\/code>):<\/strong><\/p>\n<p>\u015eimdi <code>router\/index.js<\/code> dosyas\u0131n\u0131 g\u00fcncelleyerek i\u00e7 i\u00e7e rotalar\u0131 tan\u0131mlayal\u0131m. Ana rotay\u0131 <code>UserLayout<\/code> bile\u015fenine ba\u011flayacak ve <code>children<\/code> \u00f6zelli\u011fi ile alt rotalar\u0131 belirleyece\u011fiz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ src\/router\/index.js\nimport { createRouter, createWebHistory } from 'vue-router';\nimport HomeView from '..\/views\/HomeView.vue';\nimport UserLayout from '..\/views\/UserLayout.vue'; \/\/ Ana bile\u015feni import et\nimport UserProfile from '..\/views\/UserProfile.vue'; \/\/ Alt bile\u015fenleri import et\nimport UserPosts from '..\/views\/UserPosts.vue';\nimport UserSettings from '..\/views\/UserSettings.vue';\n\nconst routes = [\n  {\n    path: '\/',\n    name: 'home',\n    component: HomeView\n  },\n  {\n    path: '\/users\/:id', \/\/ Ana rotan\u0131n yolu\n    name: 'user-layout', \/\/ Ana rotaya bir isim verilebilir\n    component: UserLayout, \/\/ Ana rotan\u0131n bile\u015feni\n    children: [ \/\/ Alt rotalar burada tan\u0131mlan\u0131r\n      {\n        path: '', \/\/ Bo\u015f yol, ana rotaya do\u011frudan eri\u015fildi\u011finde varsay\u0131lan olarak y\u00fcklenecek alt rota\n        name: 'user-profile',\n        component: UserProfile\n      },\n      {\n        path: 'posts', \/\/ '\/users\/:id\/posts' yolunu olu\u015fturur (ana yola g\u00f6receli)\n        name: 'user-posts',\n        component: UserPosts\n      },\n      {\n        path: 'settings', \/\/ '\/users\/:id\/settings' yolunu olu\u015fturur\n        name: 'user-settings',\n        component: UserSettings\n      }\n    ]\n  }\n];\n\nconst router = createRouter({\n  history: createWebHistory(process.env.BASE_URL),\n  routes\n});\n\nexport default router;<\/code><\/pre>\n<p><strong>A\u00e7\u0131klamalar:<\/strong><br \/>\n&#8211; <code>path: '\/users\/:id'<\/code> ana rotay\u0131 tan\u0131mlar. <code>:id<\/code> bir rota parametresidir ve <code>UserLayout<\/code> bile\u015feni ile alt bile\u015fenlerde <code>$route.params.id<\/code> ile eri\u015filebilir.<br \/>\n&#8211; <code>children<\/code> dizisi, bu ana rotan\u0131n alt\u0131ndaki t\u00fcm rotalar\u0131 i\u00e7erir.<br \/>\n&#8211; Bir alt rotan\u0131n <code>path<\/code>&#8216;i bo\u015f bir dize <code>''<\/code> oldu\u011funda, bu alt rota ana rotan\u0131n yoluyla e\u015fle\u015fti\u011finde (\u00f6rn. <code>\/users\/123<\/code>) varsay\u0131lan olarak render edilecektir. Bu, ana rotaya gidildi\u011finde otomatik olarak bir alt g\u00f6r\u00fcn\u00fcm\u00fcn y\u00fcklenmesini sa\u011flar.<br \/>\n&#8211; Alt rotalar\u0131n <code>path<\/code>&#8216;leri, ana rotan\u0131n <code>path<\/code>&#8216;ine g\u00f6recelidir. Yani <code>path: 'posts'<\/code> asl\u0131nda <code>\/users\/:id\/posts<\/code> anlam\u0131na gelir. Ba\u015f\u0131na <code>\/<\/code> koymad\u0131\u011f\u0131n\u0131z s\u00fcrece g\u00f6receli olarak kabul edilir.<br \/>\n&#8211; <code>name<\/code> \u00f6zelli\u011fi, rotalara isim vererek programatik gezinmeyi ve <code><router-link><\/code> kullan\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. <code>router-link :to=\"{ name: 'user-posts', params: { id: $route.params.id } }\"<\/code> \u015feklinde kullanmak, URL&#8217;i do\u011frudan yazmaktan daha sa\u011flamd\u0131r.<\/p>\n<p><strong>3. <code>App.vue<\/code>&#8216;de Ana Rota Linki:<\/strong><br \/>\n<code>App.vue<\/code>&#8216;ye \u00f6rnek bir kullan\u0131c\u0131 profili linki ekleyerek test edebiliriz:<\/p>\n<pre><code class=\"language-html\"><!-- src\/App.vue -->\n<template>\n  <nav>\n    <router-link to=\"\/\">Ana Sayfa<\/router-link> |\n    <router-link to=\"\/users\/123\">Kullan\u0131c\u0131 123 Profili<\/router-link>\n  <\/nav>\n  <router-view\/>\n<\/template><\/code><\/pre>\n<p>Art\u0131k <code>\/users\/123<\/code> adresine gitti\u011finizde <code>UserLayout<\/code> bile\u015feni y\u00fcklenecek, i\u00e7inde <code>UserProfile<\/code> bile\u015feni g\u00f6r\u00fcnecek ve navigasyon linklerini kullanarak &#8220;G\u00f6nderiler&#8221; veya &#8220;Ayarlar&#8221; sekmelerine ge\u00e7i\u015f yapabileceksiniz.<\/p>\n<h3>Geli\u015fmi\u015f \u0130\u00e7 \u0130\u00e7e Rota Konseptleri<\/h3>\n<p>\u0130\u00e7 i\u00e7e rotalar sadece temel hiyerar\u015fik yap\u0131lar i\u00e7in de\u011fil, daha karma\u015f\u0131k senaryolar i\u00e7in de g\u00fc\u00e7l\u00fc \u00f6zellikler sunar.<\/p>\n<h4>1. \u0130\u00e7 \u0130\u00e7e Named Views (Adland\u0131r\u0131lm\u0131\u015f G\u00f6r\u00fcn\u00fcmler)<\/h4>\n<p>Bazen bir ana bile\u015fen i\u00e7inde birden fazla <code><router-view><\/code> \u00f6rne\u011fine ihtiyac\u0131n\u0131z olabilir. \u00d6rne\u011fin, bir dashboard layout&#8217;unda hem bir kenar \u00e7ubu\u011fu (sidebar) hem de ana i\u00e7erik alan\u0131 olabilir. Bu durumda, adland\u0131r\u0131lm\u0131\u015f g\u00f6r\u00fcn\u00fcmler devreye girer.<\/p>\n<pre><code class=\"language-html\"><!-- src\/views\/DashboardLayout.vue -->\n<template>\n  <div class=\"dashboard-layout\">\n    <header>Dashboard Ba\u015fl\u0131\u011f\u0131<\/header>\n    <aside>\n      <!-- Sol kenar \u00e7ubu\u011fu i\u00e7eri\u011fi -->\n      <router-view name=\"sidebar\"><\/router-view>\n    <\/aside>\n    <main>\n      <!-- Ana i\u00e7erik alan\u0131 -->\n      <router-view><\/router-view>\n    <\/main>\n    <footer>Dashboard Alt Bilgisi<\/footer>\n  <\/div>\n<\/template><\/code><\/pre>\n<p>Rota yap\u0131land\u0131rmas\u0131nda, <code>components<\/code> \u00f6zelli\u011fini kullanarak her bir <code><router-view><\/code>&#8216;e hangi bile\u015fenin atanaca\u011f\u0131n\u0131 belirtiriz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nimport DashboardLayout from '..\/views\/DashboardLayout.vue';\nimport DashboardMain from '..\/views\/DashboardMain.vue';\nimport DashboardSidebar from '..\/views\/DashboardSidebar.vue';\n\nconst routes = [\n  {\n    path: '\/dashboard',\n    component: DashboardLayout,\n    children: [\n      {\n        path: '', \/\/ Varsay\u0131lan dashboard g\u00f6r\u00fcn\u00fcm\u00fc\n        components: {\n          default: DashboardMain, \/\/ Adland\u0131r\u0131lmam\u0131\u015f router-view i\u00e7in\n          sidebar: DashboardSidebar \/\/ 'sidebar' adl\u0131 router-view i\u00e7in\n        }\n      }\n    ]\n  }\n];<\/code><\/pre>\n<p>Bu \u015fekilde, <code>\/dashboard<\/code> rotas\u0131na gidildi\u011finde <code>DashboardLayout<\/code> y\u00fcklenir, <code>DashboardMain<\/code> ana <code><router-view><\/code>&#8216;e, <code>DashboardSidebar<\/code> ise <code><router-view name=\"sidebar\"><\/code>&#8216;a render edilir.<\/p>\n<h4>2. Rota Parametrelerini Props Olarak Ge\u00e7irme<\/h4>\n<p>Bile\u015fenlerinizde <code>$route.params<\/code> \u00fczerinden rota parametrelerine do\u011frudan eri\u015fmek yerine, bunlar\u0131 bile\u015fen props&#8217;lar\u0131 olarak ge\u00e7irmek daha temiz ve test edilebilir bir yakla\u015f\u0131md\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nconst routes = [\n  {\n    path: '\/users\/:id',\n    component: UserLayout,\n    props: true, \/\/ Ana bile\u015fene t\u00fcm parametreleri prop olarak ge\u00e7irir\n    children: [\n      {\n        path: '',\n        name: 'user-profile',\n        component: UserProfile,\n        props: true \/\/ Alt bile\u015fene t\u00fcm parametreleri prop olarak ge\u00e7irir\n      },\n      \/\/ ... di\u011fer alt rotalar\n    ]\n  }\n];<\/code><\/pre>\n<p>\u015eimdi <code>UserLayout.vue<\/code> ve <code>UserProfile.vue<\/code> bile\u015fenlerinde <code>id<\/code> parametresini bir prop olarak tan\u0131mlayabiliriz:<\/p>\n<pre><code class=\"language-html\"><!-- src\/views\/UserLayout.vue -->\n<template>\n  <div class=\"user-layout\">\n    <h2>Kullan\u0131c\u0131 Profili: {{ id }}<\/h2> <!-- $route.params.id yerine id prop'u -->\n    <!-- ... -->\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'UserLayout',\n  props: ['id'] \/\/ id prop'unu tan\u0131mla\n}\n<\/script><\/code><\/pre>\n<p><code>props: true<\/code> yerine daha spesifik kontrol i\u00e7in bir fonksiyon da kullanabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">{\n  path: '\/users\/:id',\n  component: UserLayout,\n  props: (route) => ({ userId: route.params.id }), \/\/ 'id' parametresini 'userId' prop'u olarak ge\u00e7ir\n  \/\/ ...\n}<\/code><\/pre>\n<h4>3. Programatik Gezinme (Programmatic Navigation)<\/h4>\n<p><code><router-link><\/code> kullanmak yerine JavaScript koduyla da rotalar aras\u0131nda ge\u00e7i\u015f yapabilirsiniz. Bu, genellikle form g\u00f6nderimleri, buton t\u0131klamalar\u0131 veya bir API \u00e7a\u011fr\u0131s\u0131n\u0131n ba\u015far\u0131l\u0131 olmas\u0131 gibi durumlarda kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Bir bile\u015fenin script k\u0131sm\u0131nda\nexport default {\n  methods: {\n    goToUserSettings() {\n      \/\/ Named route ile\n      this.$router.push({ name: 'user-settings', params: { id: this.userId } });\n\n      \/\/ Path ile (g\u00f6receli olarak da kullan\u0131labilir)\n      \/\/ this.$router.push(<code>\/users\/${this.userId}\/settings<\/code>);\n    },\n    goBack() {\n      this.$router.go(-1); \/\/ Bir \u00f6nceki sayfaya d\u00f6n\n    }\n  }\n}<\/code><\/pre>\n<p>\u0130\u00e7 i\u00e7e rotalarda programatik gezinme yaparken, alt rotan\u0131n tam yolunu veya ad\u0131n\u0131 ve gerekli t\u00fcm parametreleri do\u011fru bir \u015fekilde sa\u011flamak \u00f6nemlidir.<\/p>\n<h4>4. Meta Alanlar\u0131 (Meta Fields)<\/h4>\n<p>Rotalara \u00f6zel veriler eklemek i\u00e7in <code>meta<\/code> \u00f6zelli\u011fini kullanabilirsiniz. Bu, genellikle yetkilendirme (authorization) veya sayfa ba\u015fl\u0131\u011f\u0131 gibi bilgiler i\u00e7in faydal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nconst routes = [\n  {\n    path: '\/admin',\n    component: AdminLayout,\n    meta: { requiresAuth: true, role: 'admin' }, \/\/ Ana rota i\u00e7in meta\n    children: [\n      {\n        path: 'dashboard',\n        component: AdminDashboard,\n        meta: { title: 'Y\u00f6netim Paneli' } \/\/ Alt rota i\u00e7in meta\n      }\n    ]\n  }\n];<\/code><\/pre>\n<p>Bu <code>meta<\/code> alanlar\u0131na navigasyon koruyucular\u0131 (navigation guards) i\u00e7inde eri\u015febilir ve belirli rotalara eri\u015fimi kontrol edebilirsiniz.<\/p>\n<h4>5. Navigasyon Koruyucular\u0131 (Navigation Guards)<\/h4>\n<p>Navigasyon koruyucular\u0131, bir rotaya eri\u015fimi engellemek veya y\u00f6nlendirmek i\u00e7in kullan\u0131l\u0131r. <code>beforeEach<\/code> (global), <code>beforeEnter<\/code> (rota bazl\u0131) ve <code>beforeRouteEnter<\/code>\/<code>Update<\/code>\/<code>Leave<\/code> (bile\u015fen bazl\u0131) gibi farkl\u0131 t\u00fcrleri vard\u0131r.<\/p>\n<p>\u0130\u00e7 i\u00e7e rotalarda, bir ana rotan\u0131n <code>beforeEnter<\/code> koruyucusu, o rotaya ve t\u00fcm alt rotalar\u0131na uygulan\u0131r. Alt rotalar\u0131n kendi <code>beforeEnter<\/code> koruyucular\u0131 da olabilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nconst routes = [\n  {\n    path: '\/admin',\n    component: AdminLayout,\n    meta: { requiresAuth: true },\n    beforeEnter: (to, from, next) => {\n      \/\/ Bu koruyucu, '\/admin' ve t\u00fcm alt rotalar\u0131na uygulan\u0131r\n      if (localStorage.getItem('token')) {\n        next(); \/\/ Devam et\n      } else {\n        next('\/login'); \/\/ Giri\u015f sayfas\u0131na y\u00f6nlendir\n      }\n    },\n    children: [\n      {\n        path: 'dashboard',\n        component: AdminDashboard,\n        beforeEnter: (to, from, next) => {\n          \/\/ Bu koruyucu sadece '\/admin\/dashboard' rotas\u0131na uygulan\u0131r\n          console.log('Admin Dashboard rotas\u0131na giriliyor...');\n          next();\n        }\n      }\n    ]\n  }\n];<\/code><\/pre>\n<p>Global <code>beforeEach<\/code> koruyucusu, her navigasyonda \u00e7al\u0131\u015f\u0131r ve t\u00fcm rotalar\u0131n <code>meta<\/code> alanlar\u0131n\u0131 kontrol etmek i\u00e7in idealdir:<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js (en altta, router olu\u015fturulduktan sonra)\nrouter.beforeEach((to, from, next) => {\n  if (to.meta.requiresAuth && !localStorage.getItem('token')) {\n    next('\/login');\n  } else {\n    next();\n  }\n});<\/code><\/pre>\n<h4>6. Lazy Loading (Tembel Y\u00fckleme \/ Kod B\u00f6lme)<\/h4>\n<p>Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, t\u00fcm bile\u015fenleri ba\u015flang\u0131\u00e7ta y\u00fcklemek performans sorunlar\u0131na yol a\u00e7abilir. Lazy loading, bile\u015fenleri yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fckleyerek bu sorunu \u00e7\u00f6zer. Bu, i\u00e7 i\u00e7e rotalar i\u00e7in de ge\u00e7erlidir ve \u00f6zellikle b\u00fcy\u00fck uygulamalarda \u00f6nemlidir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nconst routes = [\n  {\n    path: '\/',\n    name: 'home',\n    component: () => import('..\/views\/HomeView.vue') \/\/ Lazy load\n  },\n  {\n    path: '\/users\/:id',\n    component: () => import('..\/views\/UserLayout.vue'), \/\/ Ana bile\u015feni lazy load et\n    children: [\n      {\n        path: '',\n        name: 'user-profile',\n        component: () => import('..\/views\/UserProfile.vue') \/\/ Alt bile\u015feni lazy load et\n      },\n      {\n        path: 'posts',\n        name: 'user-posts',\n        component: () => import('..\/views\/UserPosts.vue')\n      },\n      {\n        path: 'settings',\n        name: 'user-settings',\n        component: () => import('..\/views\/UserSettings.vue')\n      }\n    ]\n  }\n];<\/code><\/pre>\n<p><code>component: () => import(...)<\/code> syntax&#8217;\u0131, bile\u015fenleri ayr\u0131 JavaScript par\u00e7ac\u0131klar\u0131na b\u00f6ler ve yaln\u0131zca ilgili rota ziyaret edildi\u011finde y\u00fcklenmelerini sa\u011flar. Bu, ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilir.<\/p>\n<h4>7. 404 Sayfalar\u0131 ve Catch-all Rotalar<\/h4>\n<p>Tan\u0131mlanmam\u0131\u015f bir yola gidildi\u011finde kullan\u0131c\u0131y\u0131 bir 404 hata sayfas\u0131na y\u00f6nlendirmek iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar. Bunu, t\u00fcm rotalar\u0131n en alt\u0131na bir &#8220;catch-all&#8221; (her \u015feyi yakalayan) rota ekleyerek yapabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ router\/index.js\nimport NotFound from '..\/views\/NotFound.vue'; \/\/ 404 sayfa bile\u015feni\n\nconst routes = [\n  \/\/ ... di\u011fer rotalar\u0131n\u0131z\n  {\n    path: '\/:pathMatch(.<em>)<\/em>', \/\/ Her \u015feyi yakalar\n    name: 'NotFound',\n    component: NotFound\n  }\n];<\/code><\/pre>\n<p>Bu rota, di\u011fer hi\u00e7bir rotayla e\u015fle\u015fmeyen t\u00fcm URL&#8217;leri yakalayacakt\u0131r.<\/p>\n<h3>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n<p>\u0130\u00e7 i\u00e7e rotalar, Vue.js uygulamalar\u0131nda bir\u00e7ok yayg\u0131n senaryoda kullan\u0131l\u0131r:<\/p>\n<p>*   <strong>Y\u00f6netim Panelleri (Admin Dashboards):<\/strong> Kenar \u00e7ubu\u011fu ve \u00fcst men\u00fc gibi sabit bir d\u00fczenin i\u00e7inde farkl\u0131 y\u00f6netim sayfalar\u0131 (kullan\u0131c\u0131 y\u00f6netimi, \u00fcr\u00fcn y\u00f6netimi, istatistikler).<br \/>\n*   <strong>Profil Sayfalar\u0131:<\/strong> Kullan\u0131c\u0131 profili, ayarlar, bildirimler, g\u00f6nderiler gibi sekmeli g\u00f6r\u00fcn\u00fcmler.<br \/>\n*   <strong>E-ticaret \u00dcr\u00fcn Sayfalar\u0131:<\/strong> \u00dcr\u00fcn listesi, kategoriye g\u00f6re filtreleme, \u00fcr\u00fcn detaylar\u0131, yorumlar.<br \/>\n*   <strong>Ayarlar B\u00f6l\u00fcmleri:<\/strong> Hesap ayarlar\u0131, gizlilik ayarlar\u0131, bildirim ayarlar\u0131 gibi alt kategoriler.<\/p>\n<p><strong>\u0130pu\u00e7lar\u0131 ve Yayg\u0131n Hatalar:<\/strong><\/p>\n<p>*   <strong><code><router-view><\/code>&#8216;i Unutmay\u0131n:<\/strong> Ana bile\u015feninizde <code><router-view><\/code> etiketini eklemeyi unutmay\u0131n, aksi takdirde alt bile\u015fenleriniz render edilmez.<br \/>\n*   <strong>G\u00f6receli Yollar:<\/strong> Alt rotalar\u0131n yollar\u0131n\u0131 tan\u0131mlarken (<code>path: 'posts'<\/code>), ana rotaya g\u00f6receli olduklar\u0131n\u0131 unutmay\u0131n. Mutlak yol (<code>path: '\/posts'<\/code>) kullan\u0131rsan\u0131z, bu rota ana rotan\u0131n d\u0131\u015f\u0131nda, k\u00f6k dizinde aran\u0131r.<br \/>\n*   <strong>Parametre Y\u00f6netimi:<\/strong> Rota parametrelerini (<code>:id<\/code>) do\u011fru bir \u015fekilde tan\u0131mlad\u0131\u011f\u0131n\u0131zdan ve <code>UserLayout<\/code> gibi ana bile\u015fenlerdeki <code><router-link><\/code>&#8216;lerde de bu parametreleri kulland\u0131\u011f\u0131n\u0131zdan emin olun.<br \/>\n*   <strong>Adland\u0131r\u0131lm\u0131\u015f Rotalar:<\/strong> <code>name<\/code> \u00f6zelli\u011fini kullanarak rotalara isim vermek, URL yap\u0131n\u0131z de\u011fi\u015fse bile <code>router-link<\/code>&#8216;lerinizin ve programatik gezinmenizin \u00e7al\u0131\u015fmaya devam etmesini sa\u011flar.<br \/>\n*   <strong>Lazy Loading&#8217;i Ak\u0131ll\u0131ca Kullan\u0131n:<\/strong> T\u00fcm rotalar\u0131 lazy load etmek her zaman en iyi \u00e7\u00f6z\u00fcm de\u011fildir. Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7ta ihtiya\u00e7 duydu\u011fu kritik bile\u015fenleri \u00f6nceden y\u00fcklemeyi d\u00fc\u015f\u00fcnebilirsiniz.<br \/>\n*   <strong>Hata Ay\u0131klama:<\/strong> Rotalar\u0131n\u0131zla ilgili bir sorun ya\u015f\u0131yorsan\u0131z, taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki Vue devtools eklentisini kullanarak mevcut rota durumunu ve bile\u015fen hiyerar\u015fisini inceleyin. <code>console.log(this.$route)<\/code> ile rota nesnesini kontrol etmek de faydal\u0131d\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Vue.js&#8217;te i\u00e7 i\u00e7e rotalar, modern ve karma\u015f\u0131k tek sayfal\u0131k uygulamalar geli\u015ftirirken vazge\u00e7ilmez bir ara\u00e7t\u0131r. Uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc mant\u0131ksal ve hiyerar\u015fik bir \u015fekilde d\u00fczenlemenize, payla\u015f\u0131lan d\u00fczenleri etkili bir \u015fekilde kullanman\u0131za ve bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini art\u0131rman\u0131za olanak tan\u0131r. Bu sayede, uygulaman\u0131z\u0131n kod taban\u0131 daha temiz, daha bak\u0131m\u0131 kolay ve daha \u00f6l\u00e7eklenebilir hale gelir.<\/p>\n<p>Bu makalede ele ald\u0131\u011f\u0131m\u0131z temel kurulumdan geli\u015fmi\u015f konseptlere (named views, props, lazy loading, navigation guards) kadar t\u00fcm ad\u0131mlar, Vue Router&#8217;\u0131n g\u00fcc\u00fcn\u00fc tam olarak kullanman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u0130\u00e7 i\u00e7e rotalar\u0131 do\u011fru bir \u015fekilde anlay\u0131p uygulayarak, kullan\u0131c\u0131lar\u0131n\u0131za daha sezgisel ve tutarl\u0131 bir deneyim sunan, ayn\u0131 zamanda geli\u015ftirici dostu ve performansl\u0131 Vue.js uygulamalar\u0131 in\u015fa edebilirsiniz. Unutmay\u0131n, iyi bir rota mimarisi, uygulaman\u0131z\u0131n uzun vadeli ba\u015far\u0131s\u0131n\u0131n temelini olu\u015fturur.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\nTek sayfal\u0131k uygulamalar\u0131n (Single Page Applications &#8211; SPA) geli\u015ft","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-36682","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue.js&#039;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js&#039;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Vue.js&#039;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber Tek sayfal\u0131k uygulamalar\u0131n (Single Page Applications - SPA) geli\u015ft\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-21T12:40:43+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-12-21T12:40:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\"},\"wordCount\":2177,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\",\"name\":\"Vue.js'te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-21T12:40:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue.js'te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js'te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","og_description":"Vue.js'te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber Tek sayfal\u0131k uygulamalar\u0131n (Single Page Applications - SPA) geli\u015ft","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-21T12:40:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber","datePublished":"2025-12-21T12:40:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/"},"wordCount":2177,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/","name":"Vue.js'te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-21T12:40:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-ic-ice-nested-rotalar-nasil-kullanilir-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js&#8217;te \u0130\u00e7 \u0130\u00e7e (Nested) Rotalar Nas\u0131l Kullan\u0131l\u0131r? Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=36682"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36682\/revisions"}],"predecessor-version":[{"id":36683,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36682\/revisions\/36683"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}