Laravel+Vue3+Inertia项目中vue-router嵌套路由配置404问题求助

问题根源 #

Inertia的架构是服务端路由与客户端路由强绑定，每个客户端路由必须对应一个存在的Laravel服务端路由。你直接用vue-router的children属性定义嵌套路由时，服务端没有对应的user/{id}路由，所以会返回404，客户端自然也显示404页面。

正确解决方案 #

不需要用vue-router的children，而是通过「服务端路由传参 + 客户端页面根据参数渲染嵌套组件」的方式实现需求：

1. 添加Laravel服务端路由
   修改/routes/web.php，新增带id参数的路由，将参数传递给Inertia页面：

// 原Home页面路由
Route::get('/user/home', function () {
    return Inertia::render('User/Home');
});

// 新增用户详情路由，传递userId参数
Route::get('/user/{id}', function ($id) {
    return Inertia::render('User/Home', [
        'userId' => $id
    ]);
});

2. 配置客户端vue-router
   在/resources/js/router/index.js中添加/user/:id的路由，直接指向Home组件：

const routes = [
    // 原Home路由
    {
        path: "/user/home",
        name: "user-home",
        component: () => import('@/User/Home'),
    },
    // 新增用户详情路由
    {
        path: "/user/:id",
        name: "user-detail",
        component: () => import('@/User/Home'),
        props: true // 开启路由参数转为组件props
    }
];

3. 在Home.vue中渲染User组件
   通过Inertia的usePage获取服务端传递的参数，或者通过vue-router的useRoute获取路由参数，然后渲染对应的User组件：

<template>
    <div class="home-page">
        <!-- Home页面原有内容 -->
        <div v-if="userId">
            <User :user-id="userId" />
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { usePage } from '@inertiajs/vue3';
import User from './User.vue';

// 获取参数：优先用Inertia传递的props，其次用路由参数
const pageProps = usePage().props.value;
const route = useRoute();
const userId = pageProps.userId || route.params.id;
</script>

补充说明 #

如果你的User组件需要单独作为页面存在，也可以让/user/{id}路由渲染专门的User/Detail组件，只需要修改Laravel路由中的Inertia::render目标组件即可。

内容的提问来源于stack exchange，提问作者Ricko Abbderahamne