Vueルーターでアンカーまでスクロール

Question

次の場所に移動するには、vuejsでアンカーリンクを設定する必要があります。

<h1 id="apply">Test anchor</h1>

以下は機能しますが、URLがhttp：// localhost：8080 /＃/ applyに変更されます

<a href="#apply" class="btn btn-primary mt-3">Apply Now</a>

その後、ページを更新すると、どこに行けばよいかわかりません。

以下も私にはうまくいきません。#applyにドロップダウンすることすらありません。

<router-link to="/careers/job-1#apply">test</router-link>

vuejsルーティングでアンカーリンクを設定するにはどうすればよいですか？

Answer 1

オブジェクトにpathとhashプロパティを追加しますto。

<router-link :to="{ path: '/careers/job-1', hash: '#apply' }">test</router-link>

そしてscrollBehavior、ルーター定義に追加します。

const router = new VueRouter({
  ...
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash,
        behavior: 'smooth'
      };
    }
    return { x: 0, y: 0 };  // Go to the top of the page if no hash
  },
  ...
})

これでbehavior、ハッシュで定義されたアンカーまで（そのプロパティを削除しない限り、スムーズに）スクロールする必要があります。