Vue-CLI(Vue3.x)でページ遷移時にトップへ移動する

技術記録

 これ割とたくさんの人が同じこと書いてたんですけど、自分はなぜかどうしても再現ができなかったので、いろんなところのを混ぜて書きましたところうまくいったので記録します。環境はここに書いてます

他の人がやってること

 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

タイトルとURLをコピーしました