【Nuxt.js】plugin実践編：vue-scrolltoをページ遷移でも適応させよう

前置き

vue-scrolltoとは
ページ内リンク(アンカーリンク)で
スクロールしながら
指定場所に飛べるもの🌟

ですが、
ページ遷移をして
遷移先の特定の指定場所に
スクロールしたい場合は
どうすれば良いのでしょうか❓

ということで今回は
それを実装していきます💫

⬇️vue-scrolltoの基本的な使い方と
　同じページ内での遷移は
　こちらをご覧ください✨👀
【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール

参考:
vue-scrolltoの使い方（基本と別ページ遷移のケース）
Nuxt.jsでハッシュ値を含むURLのリクエストがあった時の処理

コード

index.vueから
sample.vueの
id, mainまで遷移します✈️

index.vue

nuxt-linkの属性
v-scroll-toでid指定
toで遷移先のページとid指定

<template>
  <div class="page">
    <nuxt-link v-scroll-to="'#anchor'" to="/sample/#main">
      sampleのanchorに飛ぶ
    </nuxt-link>
  </div>
</template>

<nuxt-link v-scroll-to="'#anchor'" to="/sample/#main">

sampleのanchorに飛ぶ

</nuxt-link>

</div>

</template>

sample.vue

id, mainに
margin-topを多めにつけて
スクロールを分かりやすくしています。

mounted()部分は後述します✍️

<template>
  <div class="page">
    <div id="main">
      とべた！
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.page {
  font-size: 36px;

  > #main {
    margin-top: 1500px;
  }
}
</style>

とべた！

</div>

</template>

export default {

mounted() {

const hash = this.$route.hash

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

this.$scrollTo(hash)

}

</script>

.page {

font-size: 36px;

> #main {

margin-top: 1500px;

}

</style>

ハッシュ値がある場合

ハッシュ値とは

nuxt-linkで
to="/sample/#main"
このように
遷移先を指定したので
urlに#mainが入ります。

この#より後ろがハッシュ値と
言われる部分です。

ハッシュ値があるとvue-scrolltoは機能しない

通常は機能しませんが
機能させるためにmounted()で
処理を追加しています💫☝️

mounted()で機能させる

DOM操作のできるmounted()
これを使用することで
vue-scrolltoを機能させます✨

⬇️mountedの解説記事はこちら
【Nuxt.js】Nuxt文法編：mounted

routeはurlですね。
urlにhashが含まれている場合に
scrolltoを使うようにしています。

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