Neler yeni

Soru Sor ?

Sorular sorun ve topluluğumuzdan tanıtlar alın.

Yanıtlar Ver

Soruları yanıtlayın ve Vue.js uzmanı olun.

Uzman Kadro

Ücretsiz olarak sorularınız yanıtlanacaktır.

Vue.js geçmişi nasıl tutar? Karşınızda Vue-Router 4 ile gelen createWebHistory..

oldner

Kurucu
Yönetici
Kafası Karışık
Katılım
20 Ara 2020
Mesajlar
41
Tepkime puanı
1
Puanları
8
Yaş
24
Konum
Yalova
Web sitesi
www.vuejstr.com
Selamlar,

Bugün sizlerle Vue.js ‘in history (geçmiş) tutma özelliğine bakacağız.

Vue.js ‘in bir SPA (Single Page Application) özelliği sebebiyle sayfa değişiklikleri sırasında aslında gerçek anlamda farklı bir sayfaya gitmiyoruz. Çünkü adı üstünde Tek Sayfa Uygulaması. Peki bu geçiş işlemlerini Vue.js nasıl sağlıyor?

Vue.js geliştiricilerinin sayfalararası seyehati gerçekleştirebilmemiz için geliştirdiği Router sayesinde yapabiliyoruz tüm bu geçiş işlemlerini.

Vue Router ’ın önceki sürümlerinde, bir navigasyon “modu” seçme seçeneğiniz vardı. Bu mod, URL değiştiğinde sayfanın yeniden yüklenmemesi için gerçek bir URL gibi davranıyordu ve bir sayfa yeniden yüklenmeden URL’de gezinebilmek için HTML5 History API’sini kullanıyordu.

JavaScript:
const router = new VueRouter({

  mode: 'history',

  routes,

});
Vue Router 4'te, bu modlar içe aktarılabilen ve yeni geçmiş seçeneğine atanabilen modüller halinde soyutlandırıldı. Bu ek esneklik, gerekirse yönlendirici geçmişi uygulamanızı özelleştirmenize olanak tanır.

JavaScript:
// Vue Router 4

import { createRouter, createWebHistory } from "vue-router"; 

export default createRouter({

   history: createWebHistory(),

   routes: [],

 });
Vue Router 4 ile gelen yeni .addRoute yöntemi ile çalışırken dinamik yollar eklemenize izin verecektir. Bu muhtemelen her gün kullanacağımız bir özellik değil, ancak bazı ilginç kullanım durumları vardır. Örneğin, bir dosya sistemi uygulaması için bir kullanıcı arabirimi oluşturduğunuzu ve anında yeni yollar eklemek istediğinizi varsayalım. İşte burada .addRouter kullanabilirsiniz:

JavaScript:
methods: {   

uploadComplete (id) {

     router.addRoute({

       path: `/uploads/${id}`,

       name: `upload-${id}`,

       component: FileInfo

     });

   }

 }
 
Üst