Skip to content

13. [vuejs-11] projesi: yönlendirme ve gezinme

Yönlendirme, kullanıcının uygulamanın farklı sayfaları arasında gezinmesini sağlayacak unsurdur.

Projenin dizin yapısı şu şekildedir:

Image

13.1. Bağımlılıkların kurulumu

[Vue.js]'teki yönlendirme, [vue-router] bağımlılığını gerektirir:

Image

  • [1-3]'te, [vue-router] bağımlılığı kurulur;
  • [4-6]'te, bağımlılık kurulduktan sonra [package.json] dosyası değiştirilmiştir;

13.2. [router.js] yönlendirme komut dosyası

Uygulamanın gezinme kuralları [router.js] dosyasına kaydedilir (komut dosyasının adı herhangi bir şey olabilir):


// yönlendirme için gerekli içe aktarmalar
import Vue from 'vue'
import VueRouter from 'vue-router'

// yönlendirme eklentisi
Vue.use(VueRouter)

// yönlendirmenin hedef bileşenleri
import Component1 from './components/Component1.vue'
import Component2 from './components/Component2.vue'
import Component3 from './components/Component3.vue'


// uygulamanın rotaları
const routes = [
  // ana sayfa
  { path: '/', name: 'home', component: Component1 },
  // Component1
  {
    path: '/vue1', name: 'vue1', component: Component1
  },
  {
    // Bileşen2
    path: '/vue2', name: 'vue2', component: Component2
  },
  // Bileşen3
  {
    path: '/vue3', name: 'vue3', component: Component3
  },
]

// yönlendirici
const router = new VueRouter({
  routes,
  mode: 'history',
})

// yönlendiriciden dışa aktarma
export default router

Açıklamalar

  • [router.js] komut dosyası, uygulamamızın yönlendirme kurallarını belirleyecektir;
  • 1-6. satırlar: Yönlendirme için gerekli olan [vue-router] eklentisinin etkinleştirilmesi. Bu etkinleştirme için [Vue] sınıfının/fonksiyonunun (2. satır) ve yönlendirme eklentisinin (3. satır) içe aktarılması gerekir. Bu eklenti, az önce kurduğumuz [router] bağımlılığıyla birlikte kurulmuştur;
  • satır 8-11: yönlendirmenin hedef görünümlerinin içe aktarılması;
  • satır 15-21: rota tablosunun tanımlanması. Bu tablonun her bir öğesi, aşağıdaki özelliklere sahip bir nesnedir:
    • [path]: Görünümün URL'i; tarayıcının [URL] alanında görüntülenmesini istediğimiz görünüm. Buraya istediğimiz değeri girebiliriz;
    • [name]: yolun adı. Buraya da istediğimiz değeri girebiliriz;
    • [component]: Görünümü görüntüleyen bileşen. Burada mutlaka mevcut bir bileşen olmalıdır;

Böylece burada dört adet [/, /vue1, /vue2, /vue3] rotası olacaktır.

  • 33-36. satırlar: Yönlendirici, 3. satırda içe aktarılan [VueRouter] sınıfının bir örneğidir. [VueRouter]'in oluşturucusu burada iki parametreyle kullanılır:
    • uygulamanın rotaları;
    • tarayıcıya URL yazma modu: varsayılan mod [hash], URL'leri [localhost:8080/#/vue1] biçiminde yazar (# işareti hash'tir). [history] modu, # [localhost:8080/vue1]'i kaldırır;
  • 39. satır: yönlendirici dışa aktarılır;

13.3. Ana komut dosyası [main.js]

Ana komut dosyası [main.js] şu şekildedir:


// ithalatlar
import Vue from 'vue'
import App from './App.vue'

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// yönlendirici
import monRouteur from './router'

// yapılandırma
Vue.config.productionTip = false

// proje örneği [App]
new Vue({
  name: "app",
  // ana görünüm
  render: h => h(App),
  // yönlendirici
  router: monRouteur,
}).$mount('#uygulama')

Açıklamalar

  • 14. satır: [router.js] betiği tarafından dışa aktarılan yönlendiriciyi içe aktarıyoruz;
  • 25. satır: Bu yönlendirici, [Vue] sınıfının oluşturucusuna parametre olarak aktarıldı; bu sınıf, görünümün [router] özelliğiyle ilişkili olan [App] ana görünümünü görüntüleyecektir;

13.4. [App] ana görünümü

Ana görünümün kodu şöyledir:


<template>
  <div class="container">
    <b-card>
      <!-- bir mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-11] : routage et navigation</h4>
      </b-alert>
      <!-- güncel yönlendirme görünümü -->
      <router-view />
    </b-card>
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

Açıklamalar

  • 9. satır: mevcut yönlendirme görünümünü görüntüler. <router-view> etiketi, yalnızca görünümün [router] özelliği başlatılmışsa tanınır;

13.5. Görünümlerin sayfa düzeni

Görünümlerin sayfa düzeni, aşağıdaki [Layout] bileşeni tarafından sağlanır:


<template>
  <!-- satır -->
  <div>
    <b-row>
      <!-- üç sütunlu alan -->
      <b-col cols="2" v-if="left">
        <slot name="left" />
      </b-col>
      <!-- dokuz sütunlu alan -->
      <b-col cols="10" v-if="right">
        <slot name="right" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
  export default {
    // ayarlar
    props: {
      left: {
        type: Boolean
      },
      right: {
        type: Boolean
      }
    }
  };
</script>

Bu sayfa düzenini, [vuejs-06] paragrafındaki [vuejs-06] projesinde daha önce kullanmış ve açıklamıştık.

13.6. Gezinme bileşeni

[Navigation] bileşeni, kullanıcıya bir gezinme menüsü sunar:

Image

[1] bloğunu oluşturan bileşen şöyledir:


<template>
  <!-- üç seçenekli Bootstrap menüsü -->
  <b-nav vertical>
    <b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>
    <b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>
    <b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>
  </b-nav>
</template>
  • Bu kod, gezinmeye olanak tanıyan üç bağlantıdan oluşan 1. bloğu oluşturur;
  • <b-nav-item> etiketlerinin [to] özniteliği, uygulama yönlendiricisinin rotalarındaki [path] özelliklerinden biriyle eşleşmelidir;

13.7. Görünümler

1 numaralı görünüm şöyledir:

Image

[3-4] alanları, aşağıdaki [Component1] bileşeni tarafından oluşturulur:


<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj-->
    <b-alert show variant="primary" slot="right">Vue 1</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component1",
    // kullanılan bileşenler
    components: {
      Layout, Navigation
    }
  };
</script>

Açıklamalar

  • 2. satır: 1 numaralı görünüm, [Layout] bileşeninin, [left, right] adlı iki yuvadan oluşan mizanpajını kullanır;
  • 4. satır: Gezinme menüsü sol yuvaya yerleştirilmiştir. Yukarıda gördüğümüz alan [3]'tir;
  • 6. satır: Sağ yuvaya bir mesaj yerleştirilmiştir. Yukarıda görülen alan [4]'tir;
  1. ve 3. görünümler de benzerdir.

[Component2] bileşeni tarafından görüntülenen 2 numaralı görünüm:


<!-- 2. görünüm -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj -->
    <b-alert show variant="secondary" slot="right">Vue 2</b-alert>
  </Layout>
</template>

<script>
  import Navigation from './Navigation';
  import Layout from './Layout';

  export default {
    name: "component2",
    // görünüm bileşenleri
    components: {
      Layout, Navigation
    }
  };
</script>

[Component3] bileşeni tarafından görüntülenen 3. görünüm:


<!-- 3. görünüm -->
<template>
  <Layout :left="true" :right="true">
    <!-- gezinme -->
    <Navigation slot="left" />
    <!-- mesaj -->
    <b-alert show variant="info" slot="right">Vue 3</b-alert>
  </Layout>
</template>

<script>
  import Navigation from "./Navigation";
  import Layout from "./Layout";

  export default {
    name: "component3",
    // görünüm bileşenleri
    components: {
      Layout,
      Navigation
    }
  };
</script>

13.8. Projenin çalıştırılması

Image

Çalıştırıldığında aşağıdaki görünüm görüntülenir:

Image

  • [1]'te, URL, [http://localhost:8080]'tir. Bu durumda aşağıdaki yönlendirme kuralı yürütülmüştür: 

{ path: '/', name: 'home', component: Component1 }

Böylece [Component1] bileşeni görüntülendi. Bu bileşen, 1 numaralı görünüm olan [2]'i görüntüler. Şimdi, kodu aşağıdaki gibi olan [Vue 1] bağlantısına tıklayalım:


<b-nav-item to="/vue1" exact exact-active-class="active">Vue 1</b-nav-item>

Ekran şu şekilde değişir:

  • [3]'te aşağıdaki yönlendirme kuralı yürütüldü: 

path: '/vue1', name: 'vue1', component: Component1

Dolayısıyla yine [Component1] bileşeni görüntülendi ve buna bağlı olarak 1 numaralı görünüm olan [4] görüntülendi. Şimdi, kodu aşağıdaki gibi olan [Vue 2] bağlantısına tıklayalım:


<b-nav-item to="/vue2" exact exact-active-class="active">Vue 2</b-nav-item>

Yeni görünüm şu şekildedir:

Image

  • [5]'te şu yönlendirme kuralı uygulandı: 

path: '/vue2', name: 'vue2', component: Component2

Dolayısıyla [Component2] bileşeni ve dolayısıyla 2 numaralı görünüm görüntülenmiştir. Şimdi, kodu aşağıdaki gibi olan [Vue 3] bağlantısına tıklarsak:


<b-nav-item to="/vue3" exact exact-active-class="active">Vue 3</b-nav-item>

Aşağıdaki yeni görünüm karşımıza çıkar:

Image

  • [6]'te aşağıdaki yönlendirme kuralı yürütüldü: 

path: '/vue3', name: 'vue3', component: Component3

Dolayısıyla [Component3] bileşeni görüntülendi, yani 3 numaralı görünüm [8].

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Lisansla Paylaş 3.0 Değiştirilmemiş.