多页面应用程序（MPA）正变得越来越不流行。著名的平台，如Facebook、Twitter、YouTube、Github和其他许多平台已经在使用单页应用程序（SPA）技术来代替。
这种时髦的技术允许用户快速地参与到网络应用中去，并且反应迅速，因为一切都在客户端渲染。然而，对于使用Laravel或Django等框架构建服务器端渲染的应用程序的开发者来说，这可能是一种痛苦。
幸运的是，Inertia.js插手进来，拯救了我们。
在这篇文章中，我们将展示如何将Inertia.js与Laravel、Vue.js和Tailwind CSS结合在一起使用，以创建一个现代博客网络应用。我们还将分享如何使SPA更有利于SEO，以及其他一些小技巧。
如果你刚刚开始使用Laravel，我们建议你先阅读这篇文章，这样你就可以准备好了。
为什么是SPA？
在我们问为什么要使用Inertia之前，我们必须先问：”为什么是SPA？”
为什么会有人喜欢客户端渲染的应用程序而不是传统的服务器端应用程序? 是什么迫使一个全栈式的Laravel开发者告别了blade组件?
简短的回答：因为速度和响应性是任何成功的用户参与的关键。
在MPA的情况下, 浏览器不断向后端发送请求, 然后执行大量的数据库查询。在数据库和服务器处理查询并将其传递给浏览器之后，页面就被渲染了。
但SPA是不同的。应用程序将用户需要的一切直接带到页面上，消除了浏览器发送查询或重新加载页面以呈现新的HTML元素的需要。
由于这种独一无二的用户体验，许多大牌公司都吵着要把他们的网站变成单页应用程序。
也就是说, 创建一个单页面应用程序对Laravel开发人员来说是很困难的, 因为这需要他们开始使用Vue.js或React而不是blade模板, 导致许多Laravel宝石的损失, 以节省时间和精力.
不过，现在我们有了Inertia.js，这一切都改变了。
为什么选择Inertia？
如果Laravel开发者要在Inertia之前用Vue构建Web SPAs, 他们必须用Laravel设置API并返回JSON数据, 然后用类似AXIOS的东西来检索Vue组件中的数据. 他们还需要像Vue Router这样的东西来管理路由，这将意味着失去Laravel的路由，以及中间件和控制器。
另一方面, Inertia.js, 使得开发者能够使用经典的服务器端路由和控制器来构建现代的单页Vue, React和Svelte应用程序。Inertia是为Laravel、Ruby on Rails和Django开发者设计的，允许他们在不改变创建控制器、从数据库获取数据和渲染视图的编码技术的情况下构建应用程序。
多亏了Inertia.js，Laravel开发者会感到宾至如归。
Inertia如何工作
只用Laravel和Vue构建SPA会给你的前端提供一个完整的JavaScript页面，但这并不能为你提供一个单页面的应用体验。每一个点击的链接都会导致你的客户端框架在下一个页面加载时重新启动。
这就是Inertia进入画面的地方。
Inertia基本上是一个客户端路由库。它允许你在页面之间进行导航，而不需要重新加载整个页面。这是通过
当你点击一个Inertia链接时，Inertia会拦截该点击并将你重定向到XHR。浏览器不会以这种方式重新加载页面，给用户一个完整的单页体验。
开始使用Inertia
一个用Inertia.js制作的示例页面
为了了解Inertia以及如何将其与Laravel集成，我们将使用最强大的组合建立一个博客网络应用，Laravel用于后端，Vue.js用于JavaScript前端，Tailwind CSS用于风格设计。
如果你愿意在本地环境下学习这个教程，你可以使用DevKinsta，这是一个为开发者、设计师和机构提供的强大工具，使他们能够构建单页和多页的WordPress网络应用。幸运的是，WordPress可以使用Corcel包轻松地与Laravel集成。
前提条件
要从本教程中获得最大的收获, 你应该熟悉以下内容:
Laravel基础知识（安装，数据库，数据库迁移，Eloquent模型，控制器，和路由）
Vue.js基础知识(安装, 结构, 和表单)
如果你觉得不确定，可以看看这些精彩的Laravel免费和付费教程。否则，让我们开始吧。
第1步：安装核心元素
为了专注于Inertia.js并直接进入有趣的部分, 请确保你已经准备好以下设置：
新安装的Laravel 9项目名为 blog
在我们的Laravel项目中安装了Tailwind CSS CLI
blog/resources/views中的两个blade组件，用于查看博客的主页和博客上的一篇文章，如下图所示：index.blade.php “:
博客 - 闪电博
Read our latest articles
Title for the blog
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem
itaque error vel perferendis aliquam numquam dignissimos, expedita
perspiciatis consectetur!
Read more
“/resources/views/show.blade.php“:
博客 - 闪电博
Title for the blog
Article content goes here
名为blog的MySQL本地数据库连接到我们的项目：”.env “: DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=
文章模型、迁移和工厂：”app/Models/Article.php “。 id();
$table->string('title');
$table->text('excerpt');
$table->text('body');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('articles');
}
};
“database/factories/ArticleFactory.php“:
$this->faker->sentence(6),
'excerpt' => $this->faker->paragraph(4),
'body' => $this->faker->paragraph(15),
];
}
}
这就是我们需要开始工作的全部内容! 现在让我们进入正题，将Inertia.js引入我们的项目。
第2步：安装Inertia
Inertia的安装过程分为两个主要阶段: 服务器端(Laravel)和客户端(VueJs).
Inertia文档中的官方安装指南有点过时了，因为Laravel 9现在默认使用Vite，但我们也会去看看。
1. Server-Side
我们需要做的第一件事是通过Composer用以下终端命令安装Inertia服务器端适配器。
composer require inertiajs/inertia-laravel现在我们将设置我们的根模板, 这将是一个单一的blade文件，将用于加载你的CSS和JS文件，以及一个Inertia根，将用于启动我们的JavaScript应用程序。
因为我们使用的是最新版本的Laravel 9 v9.3.1, 我们还必须让Vite发挥它的魔力，在/resources/views/app.blade.php 的标签中包含它：
{{ config('app.name', 'Laravel') }}
@vite('resources/js/app.js') @inertiaHead
@inertia
请注意我们是如何通过在 </code> 标签中添加 <code>Inertia</code> 属性来动态地获取项目标题的。</p>
<p>我们还在头部添加了 <code>@vite</code> 指令，以便让Vite知道我们创建应用程序和导入CSS的JavaScript主文件的路径。Vite是一个帮助JavaScript和CSS开发的工具，它允许开发人员在本地开发过程中查看前端的变化而不必刷新页面。</p>
<p>我们的下一步将是创建<strong>HandleInertiaRequests</strong>中间件并将其发布到我们的项目中。我们可以通过在我们项目的根目录下发射下面的终端命令来实现。</p>
<pre><code class="language-bash">php artisan inertia:middleware</code></pre>
<p>一旦完成，前往 “App/Http/<strong>Kernel</strong> “并注册 <code>HandleInertiaRequests</code> 作为你的网络中间件的最后一项：</p>
<pre><code class="language-bash">'web' => [
// ...
AppHttpMiddlewareHandleInertiaRequests::class,
],</code></pre>
<p><strong id="2-clientside">2. Client-Side</strong></p>
<p>接下来，我们必须以与服务器端相同的方式安装我们的前端Vue.js 3依赖项：</p>
<pre><code class="language-bash">npm install @inertiajs/inertia @inertiajs/inertia-vue3
// or
yarn add @inertiajs/inertia @inertiajs/inertia-vue3</code></pre>
<p>接下来，你需要拉入Vue.js 3：</p>
<pre><code class="language-bash">npm install vue@next</code></pre>
<p>然后更新你的主要JavaScript文件，用Vue.js 3、Vite和Laravel初始化Inertia.js：</p>
<pre><code class="language-javascript">“resources/js/app.js“:
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mount(el);
},
});</code></pre>
<p>在上面的代码片段中, 我们使用Laravel的插件 <code>resolvePageComponent</code>，并告诉它从目录<strong>./Pages/$name.vue</strong>中解析我们的组件。这是因为我们将在以后的项目中把我们的Inertia组件保存在这个目录中，而这个插件将协助我们从正确的目录中自动加载这些组件。</p>
<p>剩下的就是安装 <code>vitejs/plugin-vue</code>:</p>
<pre><code class="language-bash">npm i @vitejs/plugin-vue</code></pre>
<p>并更新 <strong>vite.config.js</strong> 文件：</p>
<pre><code class="language-javascript">import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});</code></pre>
<p>最后一步是安装我们的依赖项并编译我们的文件。</p>
<pre><code class="language-bash">npm install
npm run dev</code></pre>
<p>然后就可以了! 你已经有了一个使用Vue.js 3和Vite的Laravel 9应用程序。现在，我们需要看到一些实际发生的情况!</p>
<h4 id="creating-inertia-pages">创建Inertia页面</h4>
<p>你还记得那两个用于查看我们的主页和一篇文章的blade文件（<strong>index</strong>和<strong>show</strong>）吗？</p>
<p>在使用 Inertia 时，我们唯一需要的blade文件是 <strong>app.blade.php</strong>，我们在安装 Inertia 时已经用过一次。那么，现在这些文件会怎样呢？</p>
<p>我们将把这些文件从blade组件转化为 Inertia.js 组件。</p>
<p>你的应用程序中的每个页面都有自己的控制器和Inertia的JavaScript组件。这让你只获得该页面所需的数据，而无需使用API。Inertia页面只不过是JavaScript组件，在我们的例子中，它们是Vue.js组件。它们并没有什么特别值得注意的地方。所以我们要做的是在 <code><template></code> 标签之间包裹所有的HTML内容，任何与JavaScript有关的内容都将用 <code><script></code> 标签来包裹。</p>
<p>创建一个名为 “Pages “的文件夹，将你的文件移到那里。因此，我们将把 “<strong>index.blade.php</strong>“和 “<strong>show.blade.php</strong>“放在”<strong>./resources/js/Pages</strong>“。然后我们将改变文件格式为”.vue”，而不是”.blade.php”，同时使它们名字的第一个字母大写，并将其内容变成一个标准的Vue.js组件。我们将排除 <code><html></code>, <code><head></code> 和 <code><body></code> 标签，因为它们已经包含在主根blade组件中。</p>
<pre><code class="language-php">“resources/js/Pages/Index.vue“：
<script setup>
//
</script>
<template>
<header>
<h1>博客 - 闪电博</h1>
</header>
<main>
<h2>Read our latest articles</h2>
<section>
<article>
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>Title for the blog</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem
itaque error vel perferendis aliquam numquam dignissimos, expedita
perspiciatis consectetur!
</p>
<a href="#">Read more</a>
</article>
</section>
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template>
“resources/js/Pages/Show.vue“:
<script setup>
//
</script>
<template>
<header>
<h1>欢迎来到闪电博的博客频道</h1>
</header>
<main>
<article>
<h1>Title for the blog</h1>
<p>Article content goes here</p>
</article>
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template></code></pre>
<p>有一件事真的让我很困扰！我们一直在每个组件中复制和粘贴我们的页眉和页脚，这不是很好的做法。我们不断地在每个组件中复制和粘贴我们的页眉和页脚，这并不是一个很好的做法。让我们创建一个Inertia基本布局来存储我们的持久化组件。</p>
<p>在”<strong>/resources/js</strong>“中创建一个名为 “Layouts “的文件夹，在该文件夹中创建一个名为 “WboltLayout.vue “的文件。这个文件将有我们的页眉和页脚，以及带有 <code><slot /></code> 的 <code>main</code> ，以允许所有用这个布局包装的组件嵌入其中。这个文件应该看起来像这样：</p>
<p>“resources/js/Layouts/<strong>WboltLayout.vue</strong>“:</p>
<pre><code class="language-javascript"><script setup></script>
<template>
<header>
<h1>博客 - 闪电博</h1>
</header>
<main>
<slot />
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template></code></pre>
<p>然后，我们将在我们的页面中导入这个新的布局，并将所有的HTML内容都包在其中。我们的组件应该看起来像这样：</p>
<p><strong>Index.vue</strong>:</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
</script>
<template>
<WboltLayout>
<section>
<h2>Read our latest articles</h2>
<article>
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>Title for the blog</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem
itaque error vel perferendis aliquam numquam dignissimos, expedita
perspiciatis consectetur!
</p>
<a href="#">Read more</a>
</article>
</section>
</WboltLayout>
</template></code></pre>
<p><strong>Show.vue</strong>:</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
</script>
<template>
<WboltLayout>
<article>
<h1>Title for the blog</h1>
<p>Article content goes here</p>
</article>
</WboltLayout>
</template></code></pre>
<h4 id="laravel-routes-and-inertia-render">Laravel路由和惯性渲染</h4>
<p>首先，让我们使用我们的教程起点中的 “<strong>ArticleFactory</strong>“文件，将一些文章播种到我们的数据库。</p>
<p>“database/seeders/<strong>databaseSeeder.php</strong>“:</p>
<pre><code class="language-php"><?php
namespace DatabaseSeeders;
use AppModelsArticle;
use IlluminateDatabaseSeeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
Article::factory(10)->create();
}
}</code></pre>
<p>然后点击下面的终端命令，迁移你的表，并从工厂中播种假数据：</p>
<pre><code class="language-bash">php artisan migrate:fresh --seed</code></pre>
<p>这将在数据库中创建10个假的文章, 我们将需要使用Laravel路由来传递给我们的视图。现在我们使用Inertia来渲染视图, 我们过去写路由的方式将略有改变。让我们在 “routes/<strong>web.php</strong>“中创建我们的第一个Laravel Inertia路由，并从”/resources/js/Pages/<strong>Index.vue</strong>“返回主页视图。</p>
<p>“routes/<strong>web.php</strong>“:</p>
<pre><code class="language-php"><?php
use AppModelsArticle;
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Index', [
'articles' => Article::latest()->get()
]);
})->name('home');</code></pre>
<p>注意，我们导入了Inertia，没有使用Laravel的view()助手来返回视图，而是使用了 <code>Inertia::render</code>。Inertia也会默认寻找我们在<strong>Pages</strong>文件夹下 “resources/js “中提到的文件名。</p>
<p>前往索引文件，并将检索到的数据设置为道具，用 <code>v-for</code> 在它们上面循环，以显示结果。在脚本标签之间，将传递的数据定义为一个道具。Inertia需要知道的是你所期望的数据类型，在我们的例子中是一个包含文章数组的 “Article”对象。</p>
<p>“resources/js/Pages/<strong>Index.vue</strong>“:</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
Articles: Object,
});
</script></code></pre>
<p>注意，只把它定义为一个道具而不返回就足够了，因为我们使用的是Vue.js 3 composition API的 <code>setup</code> 格式。如果我们使用的是选项API，那么我们就需要返回它。</p>
<p>让我们来做这个循环：</p>
<pre><code class="language-javascript"><template>
<WboltLayout>
<h2>Read our latest articles</h2>
<section>
// Looping over articles
<article v-for="article in articles":key="article.id">
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>{{article.title}}</h3>
<p>{{article.excerpt}}</p>
<a href="#">Read more</a>
</article>
</section>
</WboltLayout>
</template></code></pre>
<p><code>npm run dev</code> (让它运行，因为我们使用的是Vite)和 <code>php artisan serve</code> 来启动laravel开发服务器，访问我们的网站，我们会看到预期的页面，显示数据库中的所有十篇文章。</p>
<p>现在, 我们正在使用谷歌浏览器的Vue DevTools扩展, 它允许我们调试我的应用程序。让我们来看看我们的数据是如何被传递给组件的。</p>
<p></p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/e2e33f962636459d812abf1145984a63.jpg" target="_blank"><img alt="如何在Laravel项目中使用Inertia.js？_第2张图片" height="345" src="http://img.e-com-net.com/image/info8/e2e33f962636459d812abf1145984a63.jpg" width="650" style="border:1px solid black;"></a></p>
<p>检查Inertia的属性</p>
<p>“Articles”作为一个道具对象传递给组件, 包含一个文章数组; 数组中的每个文章也是一个对象, 其属性与它从数据库获得的数据相对应. 这意味着我们从Laravel传输到Inertia的任何数据都将被视为一个道具。</p>
<h4 id="using-tailwind-css-with-inertiajs" style="background-color:transparent;">Tailwind CSS与Inertia.js整合</h4>
<p>由于Tailwind在开始时已经安装在我们的项目中，我们所需要做的就是告诉它读取我们的Inertia组件。这可以通过编辑 “<strong>tailwind.config.js</strong>“来实现，如下所示：</p>
<pre><code class="language-javascript">/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
};</code></pre>
<p>然后确保我们已经在 “resources/js/<strong>app.js</strong>“中导入我们的CSS文件：</p>
<pre><code class="language-javascript">import "../css/app.css";</code></pre>
<p>现在我们准备为我们的组件设置样式。</p>
<p>“resources/js/Pages/<strong>Index.vue</strong>“:</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
articles: Object,
});
</script>
<template>
<WboltLayout>
<h2 class="text-2xl font-bold py-10">Read our latest articles</h2>
<section class="space-y-5 border-b-2 pb-10">
<article
v-for="article in articles"
:key="article.id"
class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl"
>
<img
src="/images/wbolt-logo.png"
class="w-32 h-32 rounded-xl object-cover"
alt=""
/>
<div class="flex flex-col text-left justify-between pl-3 space-y-5">
<h3
class="text-xl font-semibold text-indigo-600 hover:text-indigo-800"
>
<a href="#">{{ article.title }}</a>
</h3>
<p>
{{ article.excerpt }}
</p>
<a
href="#"
class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold"
>Read more</a
>
</div>
</article>
</section>
</WboltLayout>
</template></code></pre>
<p>“resources/js/Layouts/<strong>WboltLayout.vue</strong>“:</p>
<pre><code class="language-javascript"><script setup></script>
<template>
<Header
class="bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4"
>
<h1 class="text-white font-bold text-4xl">博客 - 闪电博</h1>
</Header>
<main class="container mx-auto text-center">
<slot />
</main>
<footer
class="bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto"
>
<h2 class="font-bold text-xl pb-5">Join our Newsletter</h2>
<input
class="rounded-xl w-80 h-12 px-3 py-2 shadow-md"
type="email"
placeholder="Write your email.."
/>
</footer>
</template></code></pre>
<p>如果你看一下浏览器，你会发现Vite已经用Tailwind magic更新了页面。</p>
<p></p>
<p class="img-center"></p>
<p>渲染的Inertia属性</p>
<h4 id="inertia-links">Inertia链接</h4>
<p>现在我们有了一个可以显示数据库中所有文章的工作主页，我们需要创建另一个路由来显示个别文章。让我们创建一个新的路由，并将URL设置为 “id “通配符：</p>
<p>“routes/<strong>web.php</strong>”</p>
<pre><code class="language-php"><?php
use AppModelsArticle;
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Index', [
'articles' => Article::latest()->get()
]);
})->name('home');
Route::get('/posts/{article:id}', function (Article $article) {
return Inertia::render('Show', [
'article' => $article
]);
})->name('article.show');</code></pre>
<p>我们导入了“Article”模型，并添加了一条新路线以返回Inertia组件<strong>Show.vue</strong>。我们还利用了Laravel的路由模型绑定，它允许Laravel自动获取我们所指的文章。</p>
<p>我们现在需要的是一种方法，通过点击主页上的链接来访问这条路线，而无需重新加载整个页面。这可以通过Inertia的神奇工具 <code><Link></code> 实现。我们在介绍中提到，Inertia使用 <code><Link></code> 作为标准锚标记 <code><a></code> 的包装器，该包装器旨在使页面访问尽可能无缝。在Inertia中，<code><Link></code>标记可以充当执行 <code><GET></code> 请求的锚标记，但它也可以同时充当 <code><button></code> 和 <code><form></code> 。让我们看看如何将其应用于我们的项目。</p>
<p>在我们的Index.vue，我们将从Inertia导入 <code><Link></code>，并移除锚标记 <code><a></code> 并将其替换为Inertia的 <code><Link></code> 标记。<code>href</code> 属性将设置为我们之前为查看文章而创建的路由URL：</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
import { Link } from "@inertiajs/inertia-vue3";
defineProps({
articles: Object,
});
</script>
<template>
<WboltLayout>
<section class="space-y-5 border-b-2 pb-10">
<h2 class="text-2xl font-bold pt-10 mx-auto text-center">
Read our latest articles
</h2>
<article
v-for="article in articles"
:key="article.id"
class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl"
>
<img
src="/images/wbolt-logo.png"
class="w-32 h-32 rounded-xl object-cover"
alt=""
/>
<div
class="flex flex-col text-left justify-between pl-3 space-y-5"
>
<h3
class="text-xl font-semibold text-indigo-600 hover:text-indigo-800"
>
<Link :href="'/posts/' + article.id">{{
article.title
}}</Link>
</h3>
<p>
{{ article.excerpt }}
</p>
<Link
:href="'/posts/' + article.id"
class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold"
>Read more
</Link>
</div>
</article>
</section>
</WboltLayout>
</template></code></pre>
<p>让我们使用Tailwind对<strong>Show.vue</strong>执行样式化，使其看起来更加整洁，为我们的访问做好了准备。我们还需要让它知道，它应该期待一个“Article”对象，并将其设置为道具：</p>
<pre><code class="language-javascript"><script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
article: Object,
});
</script>
<template>
<WboltLayout>
<article class="mx-auto mt-10 flex justify-center max-w-5xl border-b-2">
<img
src="/images/wbolt-logo.png"
class="w-80 h-80 rounded-xl mx-auto py-5"
alt=""
/>
<div class="text-left flex flex-col pt-5 pb-10 px-10">
<h1 class="text-xl font-semibold mb-10">{{ article.title }}</h1>
<p>{{ article.body }}</p>
</div>
</article>
</WboltLayout>
</template></code></pre>
<p>现在，当我们点击文章标题或“Read more”时，我们将被神奇地传送到<strong>Show.vue</strong>，而无需刷新页面。</p>
<p></p>
<p class="img-center"><a href="http://img.e-com-net.com/image/info8/6c7c2871de0a4ffa80e7c74154dbf7f3.jpg" target="_blank"><img alt="如何在Laravel项目中使用Inertia.js？_第3张图片" height="378" src="http://img.e-com-net.com/image/info8/6c7c2871de0a4ffa80e7c74154dbf7f3.jpg" width="650" style="border:1px solid black;"></a></p>
<p>Inertia链接示例</p>
<p>在我们的例子中，我们使用 <code><Link></code> 作为锚标记，向路由发送 <code>GET</code> 请求并返回新数据，但我们也可以使用 <code><Link></code> 到 <code>POST</code>, <code>PUT</code>, <code>PATCH</code> 和 <code>DELETE</code></p>
<p>“routes/<strong>web.php</strong>“:</p>
<pre><code class="language-php"><Link href="/logout" method="post" as="button" type="button">Logout</Link></code></pre>
<h4 id="laravel-inertia-tips-and-tricks-you-should-know" style="background-color:transparent;">Laravel集成Inertia技巧和窍门</h4>
<p>我们现在有一个用Laravel、Inertia和Tailwind CSS构建的工作SPA。但惯性可以帮助我们实现更多。现在是时候掌握一些惯性技术了，这对开发者和应用访问者都有帮助。</p>
<h5 id="generating-urls">生成URLs</h5>
<p>你可能已经注意到，我们一直在为我们的Laravel路由添加名字，却没有使用它。Inertia允许我们在组件中使用我们的命名路由，而不是手动写下完整的路由。</p>
<p>我们可以通过在我们的项目中安装Ziggy包来实现这个目标：</p>
<pre><code class="language-bash">composer require tightenco/ziggy</code></pre>
<p>然后前往 “resources/js/app.js”，像这样更新它：</p>
<pre><code class="language-javascript">import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});</code></pre>
<p>前往”/resources/views/<strong>app.blade.php</strong>“，用 <code>@route</code> 指令更新头部：</p>
<pre><code class="language-php"><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fetch project name dynamically -->
<title inertia>{{ config('app.name', 'Laravel') }}
@routes
@vite('resources/js/app.js')
@inertiaHead
@inertia
