如何使用vue-router +惯性

Question

大家好，我有 laravel 和 vue 3 应用程序，我使用 inertia 来粘合服务器端和客户端。 我在 home.vue 页面中嵌套了组件 user 我想通过 vue-router 自定义

user/{id}/

到用户组件的路由

尝试使用 vue-router 子属性，我得到 404 未找到页面 这是代码

资源\js 外部\index.js

path: "/User/Home",
name: "create",
component:() => import('@/create'),

/routes\web.php

Route::get('/user/home', function () {
    return Inertia::render('User/Home');
});

Answer 1

这是因为 Inertia 是服务器端渲染而不是客户端。为了使这项工作有效（我也必须发现这一点，它的记录非常糟糕） - 在您提供模板的路线上，您需要在所有端点上添加一个包罗万象的内容。

看起来有点像这样：

Route::get('my/route/{any?}', 'InertiaController@index')
->where('any', '.*')
->name('my-spa-route');

我不是专业人士，但基本上你需要在初始路由之后捕获所有端点，以提供相同的模板，vue-router 使用 BrowserHistoryAPI 这是客户端，Inertia 是服务器端。它将提供 404，因为从技术上来说，/user/{id} 是一个需要模板的端点。

在此技术中，您所做的基本上是将路线处理从惯性传递到 vue-router。

但是试着想想惯性是否是你所需要的。 Vue-Router 和 Inertia 路由器是两个不同的东西。我建议尝试用惯性处理用户路线，因为根据我自己的经验，它们不能很好地协同工作。