Ana içeriğe geç

Yönlendirme

Yönlendirme​

İstemci Tarafı vs. Sunucu Tarafı Yönlendirme​

Sunucu tarafında yönlendirme, sunucunun kullanıcının ziyaret ettiği URL yoluna göre bir yanıt gönderdiği anlamına gelir. Geleneksel bir sunucu tarafından render edilen web uygulamasında bir bağlantıya tıkladığımızda, tarayıcı sunucudan bir HTML yanıtı alır ve yeni HTML ile tüm sayfayı yeniden yükler.

Ancak bir Tek Sayfa Uygulaması (SPA) durumunda, istemci tarafındaki JavaScript, gezinmeyi yakalayabilir, dinamik olarak yeni verileri alabilir ve mevcut sayfayı tam sayfa yeniden yüklemeleri olmadan güncelleyebilir. Bu genellikle, kullanıcıların uzun bir süre boyunca birçok etkileşimde bulunması beklenirken, daha gerçek "uygulama" benzeri kullanım durumlarında daha hızlı bir kullanıcı deneyimi ile sonuçlanır.

Bu tür SPAlarda, "yönlendirme" tarayıcıda, istemci tarafında gerçekleştirilir. — Vue.js Belgeleri

Bir istemci tarafı yönlendiricisi, Tarih API veya hashchange olayı gibi tarayıcı API'lerini kullanarak uygulamanın render edilmiş görünümünü yönetmekten sorumludur.

Resmi Yönlendirici​

bilgi

Vue, SPAlar oluşturmak için iyi bir şekilde uyum sağlamaktadır. 

Vue School'da Ücretsiz Video Kursunu İzleyin

Çoğu SPA için, resmi olarak desteklenen Vue Router kitaplığını kullanmanız önerilir. Daha fazla bilgi için Vue Router'ın belgelerine bakın.

Sıfırdan Basit Yönlendirme​

Sadece çok basit bir yönlendirmeye ihtiyacınız varsa ve tam özellikli bir yönlendirici kitaplığı kullanmak istemiyorsanız, bunu Dinamik Bileşenler ile yapabilir ve mevcut bileşen durumunu tarayıcıdaki hashchange olaylarını dinleyerek veya Tarih API kullanarak güncelleyebilirsiniz.

İşte yalın bir örnek:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Ana Sayfa</a> |
  <a href="#/about">Hakkında</a> |
  <a href="#/non-existent-path">Kırık Bağlantı</a>
  <component :is="currentView" />
</template>

Oynamak için buraya tıklayın

<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
          this.currentPath = window.location.hash
        })
  }
}
</script>

<template>
  <a href="#/">Ana Sayfa</a> |
  <a href="#/about">Hakkında</a> |
  <a href="#/non-existent-path">Kırık Bağlantı</a>
  <component :is="currentView" />
</template>

Oynamak için buraya tıklayın