Vue Router ile bağlantı etiketleri oluşturma

Question

Küçük bir Vue webapp oluşturuyorum, bunun için bir bağlantı etiketi oluşturmak istiyorum.

<div id="for-home"> 
    .... 
</div> 

Ve işte benim yönlendirici yapılandırması:

export default new Router({ 
    abstract: true, 
    mode: 'history', 
    scrollBehavior:() => ({ y: 0 }), 
    routes: [ 
    { path: '/', component: abcView} 
    ] 
}) 

Ama bu çapa etiketleri ile

ben böyle çapa etiketleri olmasını istedik div birine bir id verdik Bazen çalışıyor ve bazen çalışmıyor, Bu konuda bir şey mi özledim?

Answer 1

Ben Sayfa içinde #section-3 gibi bir bağlantı etiketi giderek, sayfanın belirli bir bölgeye doğrudan atlama hakkında soru soruyor inanıyoruz. Bu işlemin gerçekleşmesi için

, aşağıda anlatıldığı şekilde scrollBehavior işlevini değiştirmek gerekir:

new VueRouter({ 
    mode: 'history', 
    scrollBehavior: function(to, from, savedPosition) { 
     if (to.hash) { 
      return {selector: to.hash} 
     } else { 
      return { x: 0, y: 0 } 
     } 
    }, 
    routes: [ 
     {path: '/', component: abcView}, 
     // your routes 
    ] 
}); 

Ref: http://router.vuejs.org/en/advanced/scroll-behavior.html

Bir jsFiddle örneğini oluşturarak teşebbüs ama bunun nedeni mode:'history' ait çalışmıyor. Eğer kodu kopyalayıp ve yerel olarak çalıştırırsanız, nasıl çalıştığını göreceksiniz: https://jsfiddle.net/mani04/gucLhzaL/ scrollBehavior içinde {selector: to.hash} geri göndererek

, sen id kullanılarak işaretlenmiş ilgili bölümde (nereye taşınacak sonraki rota, hiç bağlantı etiketi karma geçecek) bu rotada.

Answer 2

Bu soruna daha yeni geldim ve sayfa takasını optimize etmek için az yer olduğunu düşündüm. Benim durumumda "atlama çevresi" yerine yumuşak bir geçiş yapmak istiyorum. JQuery'de $ için takma ad istedim.

Pürüzsüz animasyon için Yönlendirici Kurulumu İşte, ihtiyaçlarınıza göre hatları değiştirmek için çekinmeyin. Bu kod daha temiz hale getirilmiş olabilir, ancak size çalışma fikrini gösterecek kadar iyi olmalıdır.

// Register Router and Paths 
const router = new VueRouter({ 
    mode: 'history', 
    routes : [ 
     { path: '/aboutme/', component: index, name:'me.index'}, 
     { path: '/aboutme/cv', component: cv, name:'me.cv' } 
    ], 

    // Build smooth transition logic with $ 
    scrollBehavior (to, from, savedPosition) { 
     if (to.hash) { 
      return $('html,body').stop().animate({scrollTop: $(to.hash).offset().top }, 1000); 
     } else { 
      return $('html,body').stop().animate({scrollTop: 0 }, 500); 
     } 
    } 
}) 

Tarafımın Yan Soruları: Bir şeyleri geri vermek zorunda mıyız? JQuery Animation sayfa kaydırma işlemini sürdürdüğünden dolayı herhangi bir sorunum yok ya da dönmeden.

saygıları Gkiokan