結論
WARN router.scrollBehavior property is deprecated in favor of using ~/app/router.scrollBehavior.js file, learn more: https://nuxtjs.org/api/configuration-router#scrollbehavior
警告router.scrollBehaviorプロパティは廃止され、〜/ app / router.scrollBehavior.jsファイルを
使用するようになりました。
詳細については、https://nuxtjs.org/api/configuration-router#scrollbehaviorをご覧ください。
[https://nuxtjs.org/api/configuration-router#scrollbehavior]より引用
v2.9.0以降では、ファイルを使用してルーターのscrollBehaviorを上書きできます。
このファイルは、~/app/router.scrollBehavior.jsに配置する必要があります
(注:Windowsで実行している場合、ファイル名は大文字と小文字で区別されます。)
ja.nuxtjs.org#scrollbehavior にある通り、routeにappというフォルダを作り、router.scrollBehavior.jsを入れてやれば、勝手に読み込まれるっぽい?
(ちなみに、デフォルトではappフォルダはないらしい。)
早速、試してみました。
手順?(やったこと)
- app/router.scrollBehavior.jsを作成
$ mkdir app
$ touch app/router.scrollBehavior.js
今回やりたかったページ遷移時にトップに戻る処理を記載
ja.nuxtjs.org#scrollbehaviorexport default function (to, from, savedPosition) { return { x: 0, y: 0 } }
警告が消えました。
まとめ
ということで、router.scrollBehaviorの修正方法を書いてみました。
nuxt.jsも出てから少し経ったので他人の記事をみる時にもしっかりドキュメントを覗いて、裏付けが必要になるなぁと思いました。
今回の場合は、警告のtipsが有能すぎるのでエラーから逃げなければそれほど難しい物でも、ありませんでしたが、firebaseにデプロイした時に発生したなど、特殊な問題もあるので、githubや公式のドキュメントページなど一次情報もしっかり閲覧するよう心がけたいです。
また、scrollBehaviorについてですが内部的には、router.vuejs.org/ja#非同期なスクローリングとやっていることは同じっぽいのでルートごとに処理分けや特定のルートのみに指定などいろいろ試すことができそうですね。
今後、vue3でのrouterで詰まったことがあれば、また更新します。
最後におすすめの記事を紹介
Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Speaker Deck