Q&A実現したいこと
バックエンドをLaravel、フロントエンドをVue.jsで作っていますが、
Inertia.jsのLinkを使ってページ遷移を実現しようとしています。
発生している問題・分からないこと
Inertia.jsのLinkから遷移すると、以下のエラーがコンソールに出てから、リダイレクトされて成功します。しかし遅延がすごいです。
なお、ふつうのアンカータグだと正常に遷移します。
エラーメッセージ
error
1GET http://127.0.0.1:8000/inertia-test 409 (Conflict) 2dispatchXhrRequest @ xhr.js:258 3xhr @ xhr.js:49 4dispatchRequest @ dispatchRequest.js:51 5request @ Axios.js:146 6wrap @ bind.js:5 7visit @ router.ts:342 8onClick @ link.ts:92 9callWithErrorHandling @ runtime-core.esm-bundler.js:158 10callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 11invoker @ runtime-dom.esm-bundler.js:662 12Show 10 more frames 13Show less
該当のソースコード
JavaScript
1<script setup> 2import { Head, Link } from "@inertiajs/vue3"; 3 4const props = defineProps({ 5 canLogin: Boolean, 6 canRegister: Boolean, 7 laravelVersion: String, 8 phpVersion: String, 9}); 10 11console.log(props); 12</script> 13 14<template> 15 <Head title="Welcome" /> 16 <!-- ↓409が出てから遷移する --> 17 <Link href="/inertia-test">Linkでいく</Link> 18 <!-- ↓正常に遷移する --> 19 <a href="/inertia-test" 20 21以下省略
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
Laravel側で、AppServiceProvider.phpに、
PHP
1public function boot() 2 { 3 Inertia::version(function () { 4 return md5_file(public_path('mix-manifest.json')); 5 }); 6 }
このようにしましたが結果は変わらず。
また、node moduleをいったん削除し、再度npm installをするも、一緒でした、、、、
ググってもあまり情報がヒットせず、、、
どなたか、助けてくださいm(__)m
補足
特になし
回答1件
0
自己解決
Vue.jsでInertiaをインポートする時インポート元を古いものに戻すと治りました。
使っているInertiaが古いバージョンで、インポートに仕方だけ新しいものになっていたようです。
JavaScript
1// import {Link} from '@inertiajs/vue3'; 2 3// ↓この記述に変更する 4import { Link } from '@inertiajs/inertia-vue3';
投稿2024/04/09 00:29
編集2024/04/09 00:39
総合スコア21
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。