路由 Routing

未匹配的标注

定义路由

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。

本文章首发在 LearnKu.com 网站上。

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

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

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

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~