Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

Vue-routerを使ったサイトで「リンクをクリックしても遷移しない」

Vue-routerを使ったサイトで「リンクをクリックしても遷移しない」という現象が起きて頭をひねっていた。

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

解決

Componentのjsに、computed; created()なんかと並列に以下を記述した。

beforeRouteUpdate (to, from, next) {
    //再描画前のアクション
    next();
    //再描画後のアクション
}

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

https://router.vuejs.org/ja/advanced/navigation-guards.htmlrouter.vuejs.org

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

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

を指定してやる。

https://router.vuejs.org/ja/advanced/scroll-behavior.htmlrouter.vuejs.org