Vuejs Scroll Behavior

Vuejs Scroll Behavior

Vuejs kullanırken, routerler arası geçiş yaptığımızda scroll pozisyonu haliyle kayboluyor bunun için vuejs bizlere scrollbehavior isimli fonksiyonu sağlıyor şimdi bir proje oluşturup bu fonksiyona bir göz atalım.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

cli üzerinden proje oluştururken manuel olarak router kullanacağımı da belirtiyorum ve devam ediyorum. Daha sonra src/router/index.js dosyama gelip

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition
}else{
return {x:0,y:0}
}
}
})

router optionslarına scroolBehavior fonksiyonunu tanımlayıp üçüncü parametre olan savedPosition parametresi eğer varsa geriye bu değeri yoksa 0 a 0 noktasını döndürüyorum , vuejs bizim için a sayfasından b sayfasına geçerken scroll pozsiyonunu saklıyor ve bize seçenek olarak sunuyor tabi bu pozisyon değeri tarayıcıdan geri butonuna basınca yada vue router ile birlikte router.go(-1) dediğimizde çalışıcaktır çünkü router.push veyada replace gibi routerlar arası geçiş yaptıgımızda sakladığı pozisyon değerini kaybedecektir.

ilgili kodumuzu yazdıktan sonra tek yapmamız gereken şey

sayfada scroll oluşturacak kadar içerik sağlayığ daha sonra diğer bir sayfaya geçip ardından geri butonuna basmak scroll aynı yerde kaldığını göreceksiniz.

Herkese İyi Çalışmalar Dilerim.