環境

Vue.js：2.6.12
Laravel：8.52.0

Laravelのbladeの中で、Vueコンポーネントを表示させている状態です。

問題

個人開発でVueを使っているときに気が付いた問題

Vue RouterでのSPAを実装できたと思っていたけど、
URLは正常に変わっても、コンポーネントの表示が切り替わらない・・・
リロードするとコンポーネントは正常に切り替わる。

いままで開発中にデータのやりとりが出来ているかなど確認する際は、
毎回URL直打ちして、毎回リロードしていたのを忘れてました(汗)

解決方法

変更前

vue

<template>
　<div>
    <router-view></router-view>
　</div>
</template>

変更後

keyに一意の値(今回は$route.fullPath)を入れます。

vue

<router-view :key="$route.fullPath"></router-view>

VueRouterが動くたびに、keyで一意の値が識別されることでコンポーネントが再利用されず、切り替わるようになりました。

「SPA動かない」「VueRouter　コンポーネント　変わらない」などのキーワードで
私が調べた際は、beforeRouteUpdate()について紹介してる記事がたくさんありましたが、
このやり方はほとんど見つからなかったので書いてみました。
そもそもなんで再利用されてしまうのか、という根本的な原因までは分かりませんでしたが・・・
ひとまず動いてます🙏🙏

参考記事