Yönlendirme

Yığın Gezinmesi

Mobil tarzı yığın gezinmesi; tutulan sayfalar, geçiş animasyonu ve kaydırarak geri.

Yığın gezinmesi — stack

Varsayılan davranışta sayfadan ayrılınca eski sayfa atılır, geri gelindiğinde yeniden oluşturulur. Mobil uygulamalarda beklenen ise yığın davranışıdır: ileri gidince önceki sayfa durumu, kaydırması ve formuyla korunur; geri gelince aynı örnek geri gelir. stack bunu açar:

app.useRouter({
  routes,
  mode: "history",
  stack: {
    retain: true,        // önceki sayfalar DOM'da gizli tutulsun (varsayılan false: bellekte, DOM'dan ayrılmış)
    depth: 5,            // en fazla kaç önceki sayfa tutulsun (varsayılan 5; taşan en eski sayfa atılır)
    persist: false,      // yığındaki adresler sessionStorage'a yazılsın (varsayılan false)
    animation: "slide",  // 'none' (varsayılan) | 'slide' | özel fonksiyon
    duration: 300,       // 'slide' süresi (ms)
    swipeBack: true,     // ekranın sol kenarından sağa kaydırarak geri (varsayılan kapalı)
  },
});

app.useRouter({
  routes,
  mode: "history",
  stack: {
    retain: true,        // önceki sayfalar DOM'da gizli tutulsun (varsayılan false: bellekte, DOM'dan ayrılmış)
    depth: 5,            // en fazla kaç önceki sayfa tutulsun (varsayılan 5; taşan en eski sayfa atılır)
    persist: false,      // yığındaki adresler sessionStorage'a yazılsın (varsayılan false)
    animation: "slide",  // 'none' (varsayılan) | 'slide' | özel fonksiyon
    duration: 300,       // 'slide' süresi (ms)
    swipeBack: true,     // ekranın sol kenarından sağa kaydırarak geri (varsayılan kapalı)
  },
});

stack: true varsayılan değerlerle açar. Seçenek verilmezse davranış yukarıda anlatıldığı gibidir; hiçbir şey değişmez. shell modunda geçmiş olmadığı için etkisizdir.

Kurallar:

• Tutulan sayfa geçmiş kaydına bağlıdır, rotaya değil. /notes/1 → /notes/2 → geri: /notes/1'in kendi örneği geri gelir. (Yığın açıkken aynı rotaya farklı parametreyle ileri gitmek yeni bir örnek oluşturur; onUpdate yine çağrılır.)
• İleri gidince (push/forward) ayrılan sayfa tutulur; geri gidince (back) ayrılan sayfa atılır. Tarayıcının ileri tuşu o sayfayı yeniden oluşturur. replace ile değiştirilen sayfa tutulmaz. Geri dönüp yeni bir yere gidince ileri kayıtların sayfaları atılır.
• Tutulan sayfa gizlenirken onDeactivated, geri geldiğinde onActivated ve rotanın onShow kancası çalışır. Sayfanın içindeki kaydırılabilir öğelerin konumu korunur.
• retain: true ile gizli sayfa DOM'da display: none, inert ve aria-hidden ile durur; stilleri geri gelince aynen geri konur. Sayfanın elemanı yoksa (fragment) DOM'dan ayrılarak tutulur.
• keepAlive rotalar kendi önbelleğini kullanmaya devam eder.
• Uygulama ya da router serbest bırakılınca tutulan tüm sayfalar serbest bırakılır.

app.router.stack yığının güncel listesini verir: [{ index, uri, current, retained }]. Geri düğmesinde önceki sayfanın adını göstermek gibi işler için kullanın. persist: true ile bu liste sayfa yenilemesinden sonra da gelir; yenilemede önceki sayfalar yeniden oluşturulmaz, geri gidildikçe oluşturulur.

Geçiş animasyonu. animation: 'slide' ileri gidişte yeni sayfayı sağdan kaydırır, geri gidişte mevcut sayfayı sağa çıkarır; bu sırada diğer sayfa altta durur. Animasyon retain ayarından bağımsız çalışır: retain: false iken ayrılan sayfa animasyon bitene kadar DOM'da kalır, sonra ayrılır. Kullanıcı sistemde "hareketi azalt" seçtiyse animasyon atlanır. Kendi animasyonunuzu yazmak için fonksiyon verin; iki sayfa üst üste konumlanmış olarak gelir, fonksiyon bitince stiller geri alınır:

app.useRouter({
  routes,
  stack: {
    retain: true,
    animation: async ({ direction, entering, leaving }) => {
      await Promise.all([
        entering?.animate([{ opacity: 0 }, { opacity: 1 }], 200).finished,
        leaving?.animate([{ opacity: 1 }, { opacity: 0 }], 200).finished,
      ]);
    },
  },
});

app.useRouter({
  routes,
  stack: {
    retain: true,
    animation: async ({ direction, entering, leaving }) => {
      await Promise.all([
        entering?.animate([{ opacity: 0 }, { opacity: 1 }], 200).finished,
        leaving?.animate([{ opacity: 1 }, { opacity: 0 }], 200).finished,
      ]);
    },
  },
});

Yığın animasyonu çalışan gezinmede sayfaların kendi geçişleri (motif.options.transition, bkz. Stil ve Animasyon) oynamaz; geçişi yalnızca yığın animasyonu yapar.

Sayfaların kendi geçişleri. animation verilmezse yığın, sayfaların kendi giriş/çıkış geçişlerini kullanır; ayrıca bir yığın animasyonu tanımlamak gerekmez. Sıra yığın kapalıyken olduğu gibidir: önce ayrılan sayfanın çıkışı biter, sonra gelen sayfa girer.

• İleri gidişte ayrılan sayfa çıkış geçişini oynatır, bittikten sonra yığında tutulur (retain ayarına göre ayrılır ya da gizlenir). Geri gidişte ayrılan sayfa çıkış geçişini oynatarak atılır.
• Gelen sayfa giriş geçişini oynatır; yığından geri gelen tutulan sayfa da, retain hangi değerde olursa olsun, yeniden giriş geçişini oynatır.
• Geçişi olmayan sayfa anında ayrılır ya da gelir.
• Geçiş süresince sayfa öğesinde data-nav-direction özniteliği gezinmenin yönünü taşır (initial, push, back, forward, replace, traverse); geçiş bitince kaldırılır. Aynı CSS'le ileri ve geri için farklı animasyon yazılabilir:

.page-enter-active { animation: slide-from-right .3s ease; }
.page-leave-active { animation: slide-to-left .3s ease forwards; }
[data-nav-direction="back"].page-enter-active { animation-name: slide-from-left; }
[data-nav-direction="back"].page-leave-active { animation-name: slide-to-right; }

Kaydırarak geri. swipeBack: true ile ekranın sol kenarından (varsayılan 24px) başlayan yatay dokunuş sayfayı parmakla birlikte kaydırır. Önceki sayfanın sürükleme sırasında altta görünmesi için retain: true gerekir; retain: false iken önceki sayfa DOM'da olmadığından altta sayfanın arka planı görünür, bırakınca geri gidiş yine çalışır. Genişliğin %35'ini (threshold) geçen ya da hızlı bir fiske geri gider, aksi hâlde sayfa yerine oturur. Guard geri gidişi iptal ederse sayfa geri kayar ve adres korunur. Kaydırarak yapılan geri gidişte sürükleme animasyonun kendisidir; sayfaların kendi geçişleri oynamaz. Ayarlar: swipeBack: { edge: 24, threshold: 0.35 }. Dokunuş dinleyicisi yalnızca kenardan başlayan dokunuşta etkin hâle gelir; sayfanın dikey kaydırmasını ve yatay kaydırılan içerikleri etkilemez.

Sonraki adım

Servislerin nasıl kaydedilip enjekte edildiğini öğrenmek için Bağımlılık Enjeksiyonuna Giriş bölümüne geçin.