Vue Routerでアンカー（ブックマーク）を扱うには？

Question

私はVue Routerを使ってページ内のアンカーを扱うスマートな方法を探しています。次のことを考えてみましょう：

<router-link to="#app">Apply Now</router-link> 
<!-- some HTML markup in between... --> 
<div id="app">...</div> 

除いて正常に動作しますdescribed in the docs行動を「固定するスクロール」：あなたがアンカーをクリックすると、それはdiv id="app"までをもたらします

• 。今すぐdivからスクロールしてアンカーに戻ってもう一度クリックしてください。ではなくがdivにジャンプします。実際、アンカーはクラスrouter-link-activeを保持し、URLにはまだハッシュ/#appが含まれます。
• 上記の手順でページを更新すると（URLにはまだハッシュが含まれています）、アンカーをクリックしても何も起こりません。

これは潜在的な顧客が手動でアプリケーションセクションに到達するために手動で再びスクロールする必要があるため、UXの観点からは非常に残念です。

私はVue Routerがこのような状況をカバーしているのか疑問に思っていました。参考のために、ここに私のルータです：私はあなたの問題を解決するためのリソースには何も見つかっていない

export default new VueRouter({ 
    routes, 
    mode: 'history', 
    scrollBehavior(to, from, savedPosition) { 
     if (to.hash) { 
      return { selector: to.hash } 
     } else if (savedPosition) { 
      return savedPosition; 
     } else { 
      return { x: 0, y: 0 } 
     } 
    } 
}) 

Answer 1

ができますが、リフレッシュの問題を解決するために、あなたの<router-view></router-view>を保持している部品のごmountedフックで$route.hashをutitlizeことができます。そして、あなたは<router-link></router-link>にnative修飾子とバインドを使用することができます第二回のクリックの問題を解決するために

<script> 
export default { 
    name: 'app', 
    mounted: function() 
    { 
    // From testing, without a brief timeout, it won't work. 
    setTimeout(() => this.scrollFix(this.$route.hash), 1), 
    }, 
    methods: { 
    scrollFix: function(hashbang) 
    { 
     location.href = hashbang; 
    } 
    } 
} 
</script> 

。それはかなり手作業のプロセスですが、うまくいくでしょう。

<router-link to="#scroll" @click.native="scrollFix('#scroll')">Scroll</router-link> 

そこもあなたは、ルータのafterEach方法で行うことができます何かかもしれないが、まだそれを考え出したていません。 IMOよりresusableある

Answer 2

考えられる解決策：

this.$router.push({ name: 'home' }, undefined,() => { location.href = this.$route.hash }) 

第三引数はアボート（）関数であるとして、それはしかし、望ましくない副作用を有することができる。..

あなたは世界的にそれを使用したい場合、あなたのルータに機能を追加します。

pushWithAnchor: function (routeName, toHash) { 
    const fromHash = Router.history.current.hash 
    fromHash !== toHash || !fromHash 
    ? Router.push({ name: routeName, hash: toHash }) 
    : Router.push({ name: routeName, hash: fromHash }, undefined,() => { window.location.href = toHash }) 
    } 

とで構成して、それを使用します。

あなたのような何かを行うことができ、テンプレート内

：これは素晴らしいです