Routing (URI Eşleştirme / Yönlendirme) Nedir?

Kısa bir özet yapmak gerekirse, router’ı (rotalama) URL şablonlarının (pattern) server dışında (örneğin .htaccess) ele alınması olarak özetlenebilir. Çünkü, routing işlemi sayfa isteği işlemeyi (page request handling) basitleştirmek ve özelleştirebilmek (controller) için kullanılan bir özelliktir. index.php?p=12 şeklindeki bir URL yapısı WordPress kullanmış iseniz size oldukça tanıdık gelecektir. Buna karşılık, /post/12/ daha anlamlı bir yapı olarak değerlendirilebilir.

Routing

Routing, request işlemlerinde kullanılabilecek, karmaşık kuralları kolaylıkla yönetebilme özelliği (GET, POST gibi HTTP methods, middleware gibi) ile öne çıkar. Routing işleminde işlemler route’lar (path) üzerinden yürütülür. Bu sayede URL eşleştirme işlemleri farklı amaçlarla gerçekleştirilebilmektedir. Bu işlem farklı bir şekilde ele alınsa da (client request) kullanıcılar / ziyaretçiler ve arama motorları URL’lerdeki gibi web sitesinde ve/veya uygulamasında anlamlı sonuçlara (endpoint) ulaşabilirler. Örneğin, /inbox/1/msg/2 gibi bir URL’de ilk path /inbox sonrası ise bu path’in iç yapıları olarak (routing tree) nitelendirilebilirler.

Unutmadan, routing method’ları callback function olarak (handler functions olarak da ifade edilebilir) uygulama bir request aldığında route (endpoing) ve/veya HTTP method karşılığı olarak bir istek aldığında işleme alınırlar. Bu karşılıklar doğrudan tanımlanabileceği gibi RegEx şeklinde de tanımlanabilirler. Örneğin, page/([a-z]+)/(\d+)'. Aşağıda, ayrıca HTTP GET requests ile read-only olarak işlen bir routing yapısı iletiyorum.

İşlem	Örnek URI
Tüm sayfaları listeler	/pages
Belirtilen ID’ye sahip sayfayı getirir	/pages/1
Belirtilen IR’ye sahip sayfanın yorumlarını getirir	/pages/1/comments
Sayfalar arasından, sadece belirtilen sayfa türlerindekileri listeler	/pages/drafts
Sadece belirtilen tarihte yayınlanan sayfa(ları) listeler	/pages/date/2013/02/16
Sadece ID ile belirtilen yazar tarafından oluşturulan sayfaları listeler	/authors/1/posts

Görüldüğü üzere, uygulama belirtilen route(lar) ve method(lar) ile eşleşen istekleri dinleyerek (listen) bir eşleşme yakaladığında belirtilen işlemi (callback function olarak) uygulamaktadır.

Vue.js İle Basit Bir Routing İşlemi

Vue.js Vue Router adında plugin olarak çalışmalara dahil edilebilecek, kendi resmi router’ına sahiptir. Vue Router ile ilgili ayrı bir yazıda routing işleminin ve ilgili plugin’in detaylarına değineceğim. Ancak, bu yazı bağlamında da basit bir routing işleminin ilk adımlarını atabiliriz. Öncelikle bir index.html dosyası oluşturalım. İhtiyacımız olan dosyalarımız:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
    />
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Şimdi, app içeriğini şu şekilde tanımlayabiliriz:

    <section id="app" class="section" v-cloak>
      <div class="container">
        <h1 class="title">{{ message }}</h1>

        <nav class="subtitle">
          <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-menu">
                <router-link :class="['navbar-item']" to="/post">Posts</router-link>
                <router-link :class="['navbar-item', 'is-active']" to="/page">Pages</router-link>
              </div>
            </div>
          </nav>
        </p>
        <router-view></router-view>
      </div>
    </section>

... tanımlanan to içeriğini a href="..." olarak render edecektir¹. İlgili component içeriğini ise etiketleri arasında uygular.

const post = {
        template: `<div class="notification is-primary">This is "Posts"</div>`
      };
      const page = {
        template: `<div class="notification is-info">This is "Pages"</div>`
      };

      const routes = [
        { path: "/post", component: post },
        { path: "/page", component: page }
      ];

      const router = new VueRouter({
        routes
        //mode: "history"
      });

      const app = new Vue({
        router,
        data() {
          return {
            message: "This is a message!"
          };
        }
      }).$mount("#app");

Aşağıda, ayrıca incelenebilecek farklı Routing uygulama ve açıklamalarını iletiyorum. İleride ele alacağımız örnekler çerçevesinde, Vue.js ve Golang üzerinden de bu yazıya sıklıkla atıfta bulunacağım.

Önerilen İçerikler

API Reference. Vue Router ↩