nuxtjsでページ内リンクをする方法

はじめに

• nuxtjsでページ内リンクする方法を調べてみたところ２つ方法を見つけましたが、１回目の遷移は正しく動作しますが、２回目以降が動作しないことがわかりました。この２回目以降の対応方法が見つからず。

１つ目の方法

• vue-routerの機能で実装する方法があったので参考に実装してみたところ、１回目の遷移だけはうまく行きました。 stackoverflow.com

            <v-btn color="success" class="mr-12" :to="{ path: '/hoge',hash:'#profile'}" nuxt>次の場所へ遷移</v-btn>
            (省略)
            <div id="profile"></div>

２つ目の方法

• vue-scrolltoというパッケージがあり、こちらをインストールすると楽に実装できるらしいが、ほぼ上記の実装と同じだったので、インストールしなくても大丈夫かなと思いました。

www.npmjs.com

パッケージのインストール

yarn add vue-scrollto

設定

• nuxt.config.jsファイルに下記の記述を追記する

  modules: [
    ['vue-scrollto/nuxt', { duration: 300 }]
  ],

コード

            <nuxt-link to="#profile">次の場所へ遷移</nuxt-link>
            (省略)
            <div id="profile"></div>