Vue.jsのrouter-linkにアンカーリンクを設定する

遷移先の項目にアンカー移動したいときなど、router-linkの指定を行うことで「#hashtag」を末尾に追加出来る

<router-link
    :to="{
        name: 'hogeProject',
        hash: '#hashtag'
    }"
>
ページを移動する
</router-link>

ただしこのままでは、URL末尾にハッシュがつくのみであり、移動はまだ行われない。
ページ遷移後に移動を行うためには、下記の処理を遷移先ページで指定する必要がある。

<script>
export default {
  mounted() {
    const hash = this.$route.hash;
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash);
    }
  }
};
</script>

参考サイト

たのしいWeb開発

Nuxt.jsでハッシュ値を含むURLのリクエストがあった時の処理

https://dev83.com/nuxtjs-hash/

Vue Router

API リファレンス

https://router.vuejs.org/ja/api/#router-link