Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

Vue-router でリンクが効かない(ように見える)

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

同じコンポーネントから同じコンポーネントへ移動しようとすると、コンポーネントが再利用され、再描画されない現象が起こる。そのため、「リンクが効かない」ような錯覚を起こす

next()を使って解決する

コンポーネントのjs computed; created()なんかと並列に

beforeRouteUpdate (to, from, next) {
  next();
}

を指定する。next()の前はもともとのコンポーネント、next()の後ろは更新後のコンポーネントが使われる。。

スクロール位置を調整する

更新してもスクロール位置が動かないため、ページトップにスクロールしたくなる。その場合は、ルートインスタンスの routes: []などと並列で

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

を指定してやる。