路由 Routing

0.11

0.11

定义路由

Inertia 所有的路由是在服务器端定义的。意味着你不需要 Vue 路由或 React 路由。只需要使用您的服务器端框架创建路由。

路由助手

如果您的页面不需要相应的控制器方法，如常见的问题解答或关于页面，您可以直接路由到组件。

Route::inertia('/about', 'AboutComponent');

生成 URLs

一些服务器端框架允许你从命名路由生成 URLs。然而，您将无法在客户端访问这些助手。这里有几种方式仍然可以使用 Inertia 路由命名。

第一个是在服务器端生成 URLs，并将他们作为 props 包括在内。请注意在本例子中，我们是如何传递 edit_url 和 create_url 到 Users/Index 组件中。

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all()->map(function ($user) {
                return [
                    'id' => $user->id,
                    'name' => $user->name,
                    'email' => $user->email,
                    'edit_url' => URL::route('users.edit', $user),
                ];
            }),
            'create_url' => URL::route('users.create'),
        ]);
    }
}

另外一个是使您的路由定义作为 JSON 在客户端可用，然后使用它从您的命名路由生成 URLs。

<script>
  let routes = {{ json_encode($routes) }}
</script>

如果您正在使用 Laravel，Ziggy 库将通过全局 route() 函数自动为您执行此操作。如果您将 Ziggy 与 Vue 一起使用，将此函数作为自定义 $route 属性提供使用，以便您可以在模板中使用它，这将很有帮助。

Vue 2

Vue.prototype.$route = route

Vue 3

app.config.globalProperties.$route = route

<Link :href="$route('users.create')">Create User</Link>

对于 Ruby on Rails，有一个类似的库，名为 JsRoutes。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/inertia/0.11/ro...

译文地址：https://learnku.com/docs/inertia/0.11/ro...