{"id":24327,"date":"2025-06-17T17:06:56","date_gmt":"2025-06-17T14:06:56","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/"},"modified":"2025-06-17T17:06:56","modified_gmt":"2025-06-17T14:06:56","slug":"vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/","title":{"rendered":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme"},"content":{"rendered":"<p>Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme<\/p>\n<p>Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz.  \u0130\u015fte tam bu noktada Vue.js&#8217;in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor.  Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz.  Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.<\/p>\n<h2>Vue Router Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n<p>Vue Router, Vue.js i\u00e7in resmi bir y\u00f6nlendirme k\u00fct\u00fcphanesidir.  Tek sayfa uygulamalar\u0131nda (SPA) farkl\u0131 bile\u015fenler aras\u0131nda gezinmeyi kolayla\u015ft\u0131r\u0131r, URL&#8217;leri y\u00f6netir ve kullan\u0131c\u0131 deneyimini geli\u015ftirir.  Sayfa yenilemesi olmadan ge\u00e7i\u015fler sa\u011flar, b\u00f6ylece uygulaman\u0131z daha h\u0131zl\u0131 ve daha duyarl\u0131 hale gelir.  Ayr\u0131ca, arama motorlar\u0131n\u0131n uygulaman\u0131z\u0131n i\u00e7eri\u011fini indekslemesini kolayla\u015ft\u0131rarak SEO performans\u0131na da katk\u0131da bulunur.  K\u0131sacas\u0131, Vue ile geli\u015ftirdi\u011finiz her SPA i\u00e7in olmazsa olmaz bir ara\u00e7t\u0131r.<\/p>\n<h2>Vue Router&#8217;\u0131 Kurmak Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>\u00d6ncelikle, yeni bir Vue projesi olu\u015fturman\u0131z veya mevcut projenize Vue Router&#8217;\u0131 eklemeniz gerekmektedir.  vue-cli kullanarak yeni bir proje olu\u015fturursan\u0131z, y\u00f6nlendirmeyi projeye dahil etmek olduk\u00e7a basittir.  vue create my-vue-spa komutu ile yeni bir proje olu\u015ftururken,  &#8220;Manually select features&#8221; se\u00e7ene\u011fini tercih ederek Vue Router&#8217;\u0131 se\u00e7ebilirsiniz.  Mevcut bir projede ise, a\u015fa\u011f\u0131daki komutu kullanarak vue-router paketini kurabilirsiniz:<\/p>\n<p>bash<br \/>\nnpm install vue-router<\/p>\n<p>Veya Yarn kullan\u0131yorsan\u0131z:<\/p>\n<p>bash<br \/>\nyarn add vue-router<\/p>\n<h2>Temel Bir Vue Router Uygulamas\u0131 Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>Kurulumdan sonra, y\u00f6nlendirme sistemini yap\u0131land\u0131rman\u0131z gerekmektedir.  Genellikle, main.js dosyan\u0131zda y\u00f6nlendiricinizi olu\u015fturursunuz.  \u0130\u015fte basit bir \u00f6rnek:<\/p>\n<p>javascript<br \/>\nimport { createApp } from &#8216;vue&#8217;<br \/>\nimport App from &#8216;.\/App.vue&#8217;<br \/>\nimport { createRouter, createWebHistory } from &#8216;vue-router&#8217;<br \/>\nimport Home from &#8216;.\/components\/Home.vue&#8217;<br \/>\nimport About from &#8216;.\/components\/About.vue&#8217;<br \/>\nimport Contact from &#8216;.\/components\/Contact.vue&#8217;<\/p>\n<p>const routes = [<br \/>\n  { path: &#8216;\/&#8217;, component: Home },<br \/>\n  { path: &#8216;\/about&#8217;, component: About },<br \/>\n  { path: &#8216;\/contact&#8217;, component: Contact },<br \/>\n];<\/p>\n<p>const router = createRouter({<br \/>\n  history: createWebHistory(),<br \/>\n  routes,<br \/>\n});<\/p>\n<p>const app = createApp(App);<br \/>\napp.use(router);<br \/>\napp.mount(&#8216;#app&#8217;);<\/p>\n<p>Bu kod, \u00fc\u00e7 farkl\u0131 rota (\/, \/about, \/contact) tan\u0131mlar ve her birine kar\u015f\u0131l\u0131k gelen bile\u015fenleri (Home, About, Contact) atar.  createWebHistory() y\u00f6ntemi, taray\u0131c\u0131 ge\u00e7mi\u015fini kullanarak URL&#8217;leri y\u00f6netir.  createRouter fonksiyonu ile olu\u015fturulan router instance&#8217;\u0131, createApp fonksiyonuna use metodu ile eklenir.<\/p>\n<p>Ard\u0131ndan, Home.vue, About.vue ve Contact.vue gibi bile\u015fenleri olu\u015fturman\u0131z ve i\u00e7eriklerini eklemeniz gerekir.  Bu bile\u015fenler, y\u00f6nlendirme sisteminizin hedef noktalar\u0131 olacakt\u0131r.  \u00d6rne\u011fin, Home.vue dosyas\u0131 a\u015fa\u011f\u0131daki gibi olabilir:<\/p>\n<p>vue<br \/>\n<template><\/p>\n<div>\n    Ana Sayfa<\/p>\n<p>Ho\u015f geldiniz!<\/p>\n<\/p><\/div>\n<p><\/template><\/p>\n<h2>Daha Geli\u015fmi\u015f Y\u00f6nlendirme Teknikleri Nelerdir?<\/h2>\n<p>Temel y\u00f6nlendirmenin \u00f6tesinde, Vue Router daha geli\u015fmi\u015f \u00f6zellikleri de sunar. \u00d6rne\u011fin,  **parametreli rotalar** ile dinamik i\u00e7erik g\u00f6sterebilirsiniz:<\/p>\n<p>javascript<br \/>\nconst routes = [<br \/>\n  { path: &#8216;\/user\/:id&#8217;, component: User }, \/\/ :id bir parametredir<br \/>\n];<\/p>\n<p>Bu \u00f6rnekte, \/user\/123 gibi bir rotaya eri\u015fildi\u011finde, User bile\u015fenine $route.params.id ile 123 de\u011feri ge\u00e7irilecektir.  Ayr\u0131ca, **y\u00f6nlendirme korumas\u0131** ile yetkisiz kullan\u0131c\u0131lar\u0131n belirli rotalara eri\u015fimini engelleyebilirsiniz.  Bunun i\u00e7in, beforeEnter hook&#8217;unu kullanabilirsiniz.  Daha detayl\u0131 bilgi i\u00e7in <a href=\"https:\/\/fatihsoysal.com\">bu rehberi<\/a> inceleyebilirsiniz.<\/p>\n<h2>Nested Routes (\u0130\u00e7 \u0130\u00e7e Rotalar) Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n<p>Karma\u015f\u0131k uygulamalar i\u00e7in, i\u00e7 i\u00e7e ge\u00e7mi\u015f rotalar (nested routes) kullan\u0131\u015fl\u0131d\u0131r.  Bu, hiyerar\u015fik bir yap\u0131 olu\u015fturman\u0131za ve uygulaman\u0131z\u0131 daha d\u00fczenli hale getirmenize olanak tan\u0131r.  \u0130\u015fte bir \u00f6rnek:<\/p>\n<p>javascript<br \/>\nconst routes = [<br \/>\n  {<br \/>\n    path: &#8216;\/admin&#8217;,<br \/>\n    component: Admin,<br \/>\n    children: [<br \/>\n      { path: &#8216;users&#8217;, component: AdminUsers },<br \/>\n      { path: &#8216;products&#8217;, component: AdminProducts },<br \/>\n    ]<br \/>\n  }<br \/>\n];<\/p>\n<p>Bu \u00f6rnekte, \/admin rotas\u0131 alt\u0131nda \/admin\/users ve \/admin\/products rotalar\u0131 bulunur.  Bu sayede, admin paneli gibi bir alanda alt b\u00f6l\u00fcmler olu\u015fturabilirsiniz.<\/p>\n<h2>Programatik Navigasyon Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>Bazen, kullan\u0131c\u0131 etkile\u015fimi olmadan programatik olarak y\u00f6nlendirme yapman\u0131z gerekebilir.  Bunun i\u00e7in, router.push() metodu kullan\u0131l\u0131r:<\/p>\n<p>javascript<br \/>\nthis.$router.push(&#8216;\/about&#8217;); \/\/ &#8216;\/about&#8217; rotas\u0131na y\u00f6nlendirme<\/p>\n<p>Bu kod, this.$router nesnesi arac\u0131l\u0131\u011f\u0131yla \/about rotas\u0131na y\u00f6nlendirme yapar.  router.replace() metodu ise mevcut rota ge\u00e7mi\u015fini silerek y\u00f6nlendirme yapar.<\/p>\n<h2>\u0130leri D\u00fczey Konular:  Lazy Loading ve Middleware<\/h2>\n<p>Uygulaman\u0131z\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in, **lazy loading** tekni\u011fini kullanabilirsiniz.  Bu teknik, bile\u015fenleri yaln\u0131zca gerekti\u011finde y\u00fckler, b\u00f6ylece ilk y\u00fckleme s\u00fcresi k\u0131sal\u0131r.  Bunun i\u00e7in, component yerine () => import(&#8216;.\/components\/MyComponent.vue&#8217;) \u015feklinde bir fonksiyon kullanabilirsiniz.  Ayr\u0131ca, **middleware** kullanarak rotalar\u0131n\u0131z i\u00e7in ek g\u00fcvenlik ve kontrol mekanizmalar\u0131 ekleyebilirsiniz. Daha fazla bilgi i\u00e7in Vue Router&#8217;\u0131n resmi d\u00f6k\u00fcmanlar\u0131na g\u00f6z atabilirsiniz. <\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za y\u00f6nlendirme eklemeyi \u00f6\u011frendiniz.  Temel rotalardan karma\u015f\u0131k hiyerar\u015fik yap\u0131lara kadar, Vue Router&#8217;\u0131n sundu\u011fu bir\u00e7ok \u00f6zelli\u011fi inceledik.  Lazy loading ve middleware gibi ileri d\u00fczey konularla uygulaman\u0131z\u0131n performans\u0131n\u0131 ve g\u00fcvenli\u011fini art\u0131rabilirsiniz.  Unutmay\u0131n ki, Vue Router&#8217;\u0131n g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi,  daha iyi kullan\u0131c\u0131 deneyimi ve SEO performans\u0131 i\u00e7in olduk\u00e7a \u00f6nemlidir. Daha fazla bilgi ve \u00f6rnek proje i\u00e7in  <a href=\"https:\/\/fatihsoysal.com\">Fatih Soysal&#8217;\u0131n web sitesini<\/a> ziyaret edebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li><strong>Vue Router&#8217;\u0131 hangi proje t\u00fcrlerinde kullanmal\u0131y\u0131m?<\/strong> Tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirdi\u011finizde Vue Router kullanmal\u0131s\u0131n\u0131z.<\/li>\n<li><strong>Parametreli rotalar nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/strong> Parametreli rotalarda, URL&#8217;de de\u011fi\u015fken de\u011ferler kullanabilirsiniz.  Bu de\u011ferler, ilgili bile\u015fen i\u00e7inde $route.params nesnesi arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir.<\/li>\n<li><strong>Lazy loading&#8217;in faydalar\u0131 nelerdir?<\/strong>  Lazy loading, ilk y\u00fckleme s\u00fcresini azaltarak uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>Navigation guards (ge\u00e7i\u015f korumalar\u0131) nedir?<\/strong> Navigation guards, bir rotaya ge\u00e7i\u015f yapmadan \u00f6nce belirli ko\u015fullar\u0131n kontrol edilmesini sa\u011flar.<\/li>\n<li><strong>Vue Router&#8217;\u0131n resmi d\u00f6k\u00fcmanlar\u0131na nas\u0131l ula\u015fabilirim?<\/strong>  Vue Router&#8217;\u0131n resmi d\u00f6k\u00fcmanlar\u0131na Vue.js resmi web sitesinden ula\u015fabilirsiniz.<\/li>\n<\/ul>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131&hellip;","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":[1],"tags":[],"class_list":{"0":"post-24327","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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 ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme<\/title>\n<meta name=\"description\" content=\"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js&#039;in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.\" \/>\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-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme\" \/>\n<meta property=\"og:description\" content=\"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js&#039;in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-17T14:06:56+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=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme\",\"datePublished\":\"2025-06-17T14:06:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\"},\"wordCount\":1050,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\",\"name\":\"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-06-17T14:06:56+00:00\",\"description\":\"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js'in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme\"}]},{\"@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 ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme","description":"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js'in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.","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-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme","og_description":"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js'in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-06-17T14:06:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"5 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme","datePublished":"2025-06-17T14:06:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/"},"wordCount":1050,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/","name":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-06-17T14:06:56+00:00","description":"Tek bir HTML sayfas\u0131 \u00fczerinden zengin ve etkile\u015fimli web uygulamalar\u0131 geli\u015ftirmek istiyorsunuz, ancak sayfa yenileme olmadan farkl\u0131 b\u00f6l\u00fcmlere ge\u00e7i\u015f yapman\u0131n yolunu ar\u0131yorsunuz. \u0130\u015fte tam bu noktada Vue.js'in g\u00fc\u00e7l\u00fc y\u00f6nlendirme sistemi devreye giriyor. Bu rehberde, Vue Router kullanarak Vue.js uygulamalar\u0131n\u0131za sorunsuz ve performansl\u0131 y\u00f6nlendirme eklemeyi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 da art\u0131racakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-tek-sayfa-uygulamalari-spa-gelismis-yonlendirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js ile Tek Sayfa Uygulamalar\u0131 (SPA): Geli\u015fmi\u015f Y\u00f6nlendirme"}]},{"@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\/24327","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=24327"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/24327\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=24327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=24327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=24327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}