これ割とたくさんの人が同じこと書いてたんですけど、自分はなぜかどうしても再現ができなかったので、いろんなところのを混ぜて書きましたところうまくいったので記録します。環境はここに書いてます
他の人がやってること
scrollBehaviorを使った条件分岐でsavedPositionかどうかとx: 0, y: 0にぶっ飛ばす感じのコードでした。でもなぜか動かない。
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
};
自分が実際に書いたコード
router/index.js
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 }
}
};
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
scrollBehavior //追加
})
ポイントはscrollBehaviorの中身をアロー関数にしていったん外で処理させること。もう一つは、return { top: 0 } のところをx: 0, y: 0 と書かないことだと思います。特にreturn { top: 0 }はこれじゃないと機能してくれませんでした。
参考文献
他にもめっちゃ見たはずなんだけど記録してなかった。
Scroll Behavior: https://next.router.vuejs.org/guide/advanced/scroll-behavior.html
Vue で scrollBehavior が効かないときの対処法: https://qiita.com/gyuta/items/9dbf23d63f84f8cf2f5f