Vue で scrollBehavior が効かないときの対処法 #Vue.js

公式ドキュメントにある通り


const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

としてもうまく動作しない。 console.log を入れて確認したところそもそも scrollBehavior 自体呼ばれていないようだった。

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  } else {
    return { x: 0, y: 0 }
  }
};

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior
});

のように関数を別で定義して代入すれば動くようになった。

参考: https://forum.vuejs.org/t/cant-get-scrollbehavior-working/29077/5