这个如何工作

0.11

0.11

Inertia JS 中文文档 /

使用 Inertia 您就像始终使用您的服务器 Web 框架一样构建应用程序。您可以使用框架现有的功能用于路由，控制器，中间件，身份验证，授权，数据获取等。

唯一不同的是视图层。视图不是使用服务端渲染呈现的 (例如 Blade 或 ERB 模板)，而是 JavaScript 页面组件。这允许你使用 React, Vue 或 Svelte 构建整个前端。

但是简单地使用 JavaScript 创建前端并不能给你带来单页面应用体验。如果你点击链接，你的浏览器将进行完整页面的访问，然后将您的客户端框架重新启动在后续页面加载上。这是 Inertia 作用的地方。

其核心 Inertia 实质上是一个客户端路由库。它允许你进行单页面访问，而无需强制重新加载整个页面。这是使用 <Link> 组件完成的，这是一个围绕正常锚点链接的轻量级包装器。当你点击一个 Inertia 链接， Inertia 会截取点击并通过 XHR 进行访问。值得注意的是，您还可以使用 Inertia.visit() 在 JavaScript 中以编程方式进行这些访问。

当 Inertia 进行一个 XHR 访问，服务器会检测到这是一个 Inertia 访问，并且不会返回完整的 HTML 响应，而是返回一个带有 JavaScript 页面组件名和数据(Props) 的 JSON 响应。Inertia 动态地用新的页面组件替换上一个页面组件，并更新历史状态

最终的结果是一个丝般光滑的单页体验。 🎉

要了解技术上如何实现这一点，请参阅 the protocol 页面。

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