💫 Vue Routerで同じページに遷移しても、内容が変わらない

記事内で別の記事リンクをクリックしても、ページが変わらない問題が起きていましたので、修正しました。

結論

router.currentRoute の変更をウォッチすればよし

原因考察

同一ページの場合、ページコンポーネントが再セットアップされることはないようです。今回の場合、

const router = useRouter();
const id = ref<string>('' + router.currentRoute.value.params.id);

update();

このようにIDを取得して、記事データをfetchしていました。しかし、この場合setupが再度呼ばれない限り再取得できません。そのため、 id を computed で算出するようにし、 router.currentRoute をwatchして、 update() を実行するようにすれば解決です。

最終的なコード

const router = useRouter();
const id = computed(() => '' + router.currentRoute.value.params.id);

watch([router.currentRoute], () => {
  update();
});