JavaScript

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

課題を持った人
課題を持った人
Nuxt.jsアプリにvue-scrolltoモジュールを追加しました。ページ内の要素をクリックした時はスムーズスクロールが機能するのですが、ハッシュ値を含むURLのリクエストに対しては機能しません。URLにハッシュ値が含まれている時も、所定の位置までページ内をスクロールさせたいのですが、どうすればいいでしょうか?
筆者
筆者
vue-scrolltoモジュールをハッシュ値を含むURLに対応させるためには、処理を追加する必要があるので解説します。Nuxt.jsでvue-scrolltoを使用する方法はこちらの記事をご参照ください。

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

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

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

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

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

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

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

  • this.$route.hashでURLのハッシュ値を取得しています。例えば、https://hoge.com/#sec01というURLの場合は、#sec01を取得します。
  • if文の条件「hash変数に値が入っている」かつ「#からはじまる1文字以上の文字列」がtrueの場合、this.$scrollTo(hash)を実行します。
筆者
筆者
以上、ハッシュ値を含むURLに対して、vue-scrolltoモジュールを機能させる方法でした。