Vue-routerを使ったサイトで「リンクをクリックしても遷移しない」という現象が起きて頭をひねっていた。
結論から言うと、同じコンポーネントから同じコンポーネントへ移動しようとすると、コンポーネントが再利用され、再描画されない現象が起こる。そのため、「リンクが効かない」ような錯覚を起こすことがわかった。
解決
Componentのjsに、computed; created()なんかと並列に以下を記述した。
beforeRouteUpdate (to, from, next) {
//再描画前のアクション
next();
//再描画後のアクション
}
next()の前はもともとのコンポーネント、next()の後ろは更新後のコンポーネントが使われる。
ただ、データはこれで更新してもスクロール位置が動かないため、ページトップに戻してやりたくなる。その場合は、ルートインスタンスの routes: []などと並列で
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
を指定してやる。
