nuxt-linkのアンカーリンクについて

はじめに

先日、業務でnuxt-linkでの実装したので、備忘録として記事にしたいと思います。

この記事では、nuxt-linkの基本的な使い方をまとめてみました。

nuxt-linkとは？

nuxt-linkは、Nuxt.jsでページ遷移を行うためのコンポーネントです。
Vue.jsの<router-link>に相当し、SPAでのナビゲーションをサポートします。

nuxt-linkの基本構文

nuxt-linkの基本的な構文は以下のようになります。

<template>
  <div>
    <nuxt-link to="/">ホーム</nuxt-link>
    <nuxt-link to="/about">アバウト</nuxt-link>
  </div>
</template>

• タグを使用して、リンクを作成します
• to属性には、遷移先のURLパスを指定します

アンカーリンクの仕組み

アンカーリンクは、ページ内の特定の位置にジャンプするためのリンクです。
HTMLのid属性を使用して、リンク先の要素を指定します。

<template>
  <div>
    <nuxt-link to="#section1">セクション1へ移動</nuxt-link>
    <!-- 中略 -->
    <div id="section1">ここがセクション1です</div>
  </div>
</template>

ページ間リンク

ページ間リンクは、異なるページへ移動するために使用されます。
nuxt-linkのto属性に遷移先のパスを指定します。

pages/index.vue

<template>
  <div>
    <nuxt-link to="/about">アバウトページへ移動</nuxt-link>
  </div>
</template>

pages/about.vue

<template>
  <div>
    <h1>アバウトページ</h1>
  </div>
</template>

動的ルートへのリンク

動的ルートは、URLの一部が変わるページへのリンクを作成します。
例えば、下記のようなユーザープロファイルページなどです。

<template>
  <div>
    <nuxt-link :to="`/user/${userId}`">ユーザープロファイルへ移動</nuxt-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 123
    };
  }
};
</script>

ユーザーIDが123の場合、リンクをクリックすると/user/123というURLに遷移します。

クエリパラメータを使ったリンク

クエリパラメータを使用すると、URLに追加の情報を含めることができます。

<template>
  <div>
    <nuxt-link :to="{ path: '/search', query: { keyword: 'nuxt' } }">検索結果へ移動</nuxt-link>
  </div>
</template>

このリンクをクリックすると、/search?keyword=nuxtというURLに遷移します。
クエリパラメータによって追加情報がURLに含まれます。

スクロール動作のカスタマイズ

Nuxt.jsでは、ページ遷移後のスクロール位置をカスタマイズすることができます。
scrollBehavior関数を使うことで、スクロール位置を自由に設定できます。

自動スクロールのデフォルト設定

デフォルトでは、Nuxt.jsは新しいページに遷移するとトップにスクロールします。
この動作はnuxt.config.jsでカスタマイズできます。

nuxt.config.js

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      } else {
        return { x: 0, y: 0 };
      }
    }
  }
};

• to：遷移先のルートオブジェクト
• from：遷移元のルートオブジェクト
• savedPosition：ブラウザの「戻る」ボタンなどで戻った場合の以前のスクロール位置

上記は、savedPositionが存在する場合、その位置にスクロールし、
savedPositionが存在しない場合、ページの左上（{ x: 0, y: 0 }）にスクロールする設定です。

遷移後に特定の位置にスクロール

特定の要素にスクロールさせるには、to.hashを利用します。

nuxt.config.js

export default {
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        return { selector: to.hash };
      } else {
        return { x: 0, y: 0 };
      }
    }
  }
};

scrollBehavior関数を使用して、ページ遷移後のスクロール位置を制御します。

スクロール元 (pages/index.vue)

<template>
  <div>
    <nuxt-link to="/about#section1">アバウトページのセクション1へ移動</nuxt-link>
  </div>
</template>

スクロール先 (pages/about.vue)

<template>
  <div>
    <h1>アバウトページ</h1>
    <div id="section1">ここがセクション1です</div>
  </div>
</template>

to.hashを利用すると、URLのハッシュ部分に対応する要素にスクロールします。
上記例のように、#section1がURLに含まれる場合、そのIDを持つ要素にスクロールします。

参考文献