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

課題を持った人

Nuxt.jsアプリにvue-scrolltoモジュールを追加しました。ページ内の要素をクリックした時はスムーズスクロールが機能するのですが、ハッシュ値を含むURLのリクエストに対しては機能しません。URLにハッシュ値が含まれている時も、所定の位置までページ内をスクロールさせたいのですが、どうすればいいでしょうか？

筆者

vue-scrolltoモジュールをハッシュ値を含むURLに対応させるためには、処理を追加する必要があるので解説します。Nuxt.jsでvue-scrolltoを使用する方法はこちらの記事をご参照ください。

1 vue-scrolltoによるスムーズスクロールを機能させたいファイルを用意しよう
2 layouts/default.vueファイルにmounted（ライフサイクルフック）を追加しよう
3 ページ内リンク処理を追加しよう

vue-scrolltoによるスムーズスクロールを機能させたいファイルを用意しよう

まずはじめに、vue-scrolltoによるスムーズスクロールを機能させたいファイルを用意しましょう。ここでは、layoutsディレクトリ内のdefault.vueファイルに記述しますが、記述するファイルは適宜選択してください。ちなみに、layoutsディレクトリのdefault.vueファイルはlayoutsファイルを選択しない場合に自動で選択されるファイルです。

layouts/default.vueファイルにmounted（ライフサイクルフック）を追加しよう

ハッシュ値を含むURLのリクエストがあった場合、vue-scrolltoを機能させるためにはVueインスタンスのマウントが完了していて、DOM要素にアクセスできる状態になっている必要があります。ですので、mountedフックを用意して、その中に処理を追加していきましょう。mountedフックは以下のように追加します。

<template>
<!-- 省略 -->
</template>

<style>
/* 省略 */
</style>

<script>
export default {
  // 省略
  mounted() {
    // ここにURLにハッシュ値が含まれている時に
    // vue-scrolltoが機能するように記述を追加します。
  }
}
</script>

</template>

<style>

/* 省略 */

</style>

export default {

// 省略

mounted() {

// ここにURLにハッシュ値が含まれている時に

// vue-scrolltoが機能するように記述を追加します。

}

</script>

ページ内リンク処理を追加しよう

以下のようにmountedフックに処理を追加します。

<template>
<!-- 省略 -->
</template>

<style>
/* 省略 */
</style>

<script>
export default {
  // 省略
  mounted() {
    // ここから追加
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
    // ここまで追加
  }
}

</template>

<style>

/* 省略 */

</style>

export default {

// 省略

mounted() {

// ここから追加

const hash = this.$route.hash

if (hash && hash.match(/^#.+$/)) {

this.$scrollTo(hash)

}

// ここまで追加

}

ハッシュ値を含むURLに対して、スムーズスクロールが実行されれば成功です。コードを簡単に解説します。

this.$route.hashでURLのハッシュ値を取得しています。例えば、https://hoge.com/#sec01というURLの場合は、#sec01を取得します。
if文の条件「hash変数に値が入っている」かつ「#からはじまる1文字以上の文字列」がtrueの場合、this.$scrollTo(hash)を実行します。

筆者

以上、ハッシュ値を含むURLに対して、vue-scrolltoモジュールを機能させる方法でした。