Vueと共通

【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-toid指定
toで遷移先のページとid指定


sample.vue

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

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


ハッシュ値がある場合

ハッシュ値とは

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を使うようにしています。


まとめ

コード自体はいたってシンプルですね🌱
index.vueにmounted()を書くのでは?
と一瞬思いましたが、
ハッシュ値について理解すれば
遷移先に書くべきということが
分かりました💫

-Vueと共通
-,

© 2021 aLiz Nuxt