【Laravl】inertiajs+Vuetifyで画面再読み込みしないリンクがほしい
はじめに
前回の記事で書き忘れました。
本当に基本的なことですが日本語の記事があんまりなかったので書いておきます。
やりたいこと
LaravelのinertiajsではVue-routerなしで超簡単にSPAが構築できます。
inertiajsで構築したアプリでは下記のように記述すると裏でよしなにやってくれて、SPA用のリンクを作成してくれます。
<inertia-link :href="route('dashboard')">
Dahsboard
</inertia-link>
これで作成されたリンクをクリックするとブラウザが再読み込みせずにWebページとURLだけ描き変わってSPAらしい動きをします。
で本題ですが、外部フレームワークのVuetifyを使用した時はリンクをどう実装すれば良いか?
もちろんこう書いてしまうとただのリンクが生成されて画面が再読み込みされてしまうし、
<v-btn text class="ml-2" :href="route('dashboard')">
Dahsboard
</v-btn>
下記のように記載しても微妙な感じになります。
<v-btn text class="ml-2">
<inertia-link :href="route('dashboard')"> Dahsboard </inertia-link>
</v-btn>
結論
asを使いましょう。
<inertia-link :href="route('dashboard')" as="v-btn" text class="ml-2">
Dahsboard
</inertia-link>
はい解決おつかれさん!