Vueルータでアンカータグを作成する方法

Question

小さなVue webappを作成していますが、これにアンカータグを作成します。

私はid私はこのようなアンカータグ持っていると思ったdivの一つに与えている：

​​3210

そして、ここでは私のルータの設定です：

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

しかし、このアンカータグ付きですが時々働き、時にはうまくいきません。私はこれで何かを忘れましたか？

Answer 1

ページ内の#section-3のようなアンカータグに移動すると、ページの特定の領域に直接ジャンプすることをお勧めします。

これが機能するために

、あなたは次のようにあなたのscrollBehavior機能を変更する必要があります。

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 
    ] 
}); 

参考：http://router.vuejs.org/en/advanced/scroll-behavior.html

私はjsFiddle例を作成し、それが原因でmode:'history'で動作していない試みました。あなたは、コードをコピーしてローカルで実行した場合、あなたはそれがどのように動作するか表示されます。https://jsfiddle.net/mani04/gucLhzaL/

scrollBehaviorで{selector: to.hash}を返すことによって、あなたはidを使用して、関連する部分（マークにナビゲートれる、次のルートにアンカータグのハッシュを渡します）をそのルートに追加します。

Answer 2

私はちょうどこの問題に遭遇しました、そして、私はページスワップを最適化するために少しのスペースがあると思いました。私の場合は、「飛び降りる」の代わりに滑らかな移行をしたいと思います。私は$のエイリアスとしてjQueryに既に必要でした。

ここではルータのセットアップでスムーズなアニメーションができますので、必要に応じて自由に変更してください。このコードはより洗練されていますが、作業アイデアを示すのに十分なほど細かいはずです。

// 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); 
     } 
    } 
}) 

サイド質問：私たちは何かを返さなければなりませんか？私はjQueryアニメーションがページのスクロールを処理しているため、何の問題もありません。

についてGkiokan