hello guys i have laraveland vue 3 application and i use inertia for glues the server side and client side.
i have nested component user inside home.vue page
i wanna customize user/{id}/ route to user component by vue-router
try use vue-router children property i get 404 not found page this is code
\resources\js\router\index.js
path: "/User/Home",
name: "create",
component:() => import('@/create'),
/routes\web.php
Route::get('/user/home', function () {
return Inertia::render('User/Home');
});
this is because Inertia is server-side rendering instead of client-side. to make this work (I had to found this out too, it's documented pretty poorly) - on the route where you are serving the template, you need to add a catch-all on all the endpoints.
it looks a bit like this:
Route::get('my/route/{any?}', 'InertiaController@index')
->where('any', '.*')
->name('my-spa-route');
I am not a pro, but basically you need to catch all the endpoints AFTER your initial route, to serve the same template, vue-router uses BrowserHistoryAPI which is client-side, Inertia is server-side. It will serve a 404 because technically for inertia /user/{id} is an endpoint that expects a template.
What you do in this technique, is basically passing along route handling from inertia to vue-router.
Alternatively, you can configure vue-router to use Hash History mode (read about it in their docs)
But try to think if Inertia is what you need here. Vue-Router and Inertia router are two different things. I would recommend trying to handle the user route with inertia, since they don't play nicely together according to my own experience.