Laravel 10.x - Inertiajs 使用 composer require tightenco/ziggy 组件

hi，我是温新，一名 PHPer

tightenco/ziggy 该组件的作用是，可以在前端页面使用路由连接进行跳转。

第一步：安装组件

<span style="color: rgb(0, 176, 240);">composer require tightenco/ziggy</span><br></br>

第二步：注册组件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">resources\views\app</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">blade</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span> </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">DOCTYPE</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">charset</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"utf-8"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">content</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span><span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0, maximum-scale=1.0"</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><!--</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">使用</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@routes</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">进行注册</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">--></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@routes</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@vite</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'resources/js/app.js'</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@inertiaHead</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">head</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">@inertia</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">body</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"></</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">html</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">></span></span>

第三步：js 中绑定

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\app.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./bootstrap'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> { <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createApp</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h</span> } <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vue'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span> {<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createInertiaApp</span>} <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/vue3'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createInertiaApp</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">resolve</span>: <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">pages</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">import</span>.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">meta</span>.<span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">glob</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./Pages/**/*.vue'</span>, { <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">eager</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span> })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">pages</span>[<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">`</span>.<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Pages</span><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">/</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">$</span>{<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span>}.<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">vue`</span>]</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">setup</span>({ <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">el</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">App</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">props</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">plugin</span> }) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createApp</span>({ <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">render</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">App</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">props</span>) })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">use</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">plugin</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">mixin</span>({<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">methods</span>: {<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">route</span>}}) <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 绑定</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">mount</span>(<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">el</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})</span>

第四步：添加路由

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(86, 182, 194) !important"><?</span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">php</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// routes\web.php </span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'/'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">inertia</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Index'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'index'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Route</span>::<span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">get</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'about'</span>, <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">function</span> () {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">inertia</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'About'</span>);</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})<span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-></span><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">name</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'about'</span>);</span>

第五步：添加 vue 页面

resources\js\Pages\Index.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>首页<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">:href</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('about')"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>关于我<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">hr</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Home<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">route</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"../../../vendor/tightenco/ziggy/src/js"</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">export</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">default</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">name</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Index"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">methods</span>: {<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">route</span>}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

resources\js\Pages\About.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>关于我<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">:href</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"route('index')"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>首页<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">hr</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>关于<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

第六步：全局引入 Link、Head

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// resources\js\app.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./bootstrap'</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> { <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createApp</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h</span> } <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vue'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> {<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createInertiaApp</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Head</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">Link</span>} <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'@inertiajs/vue3'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createInertiaApp</span>({</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">resolve</span>: <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">name</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">const</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">pages</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">meta</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">glob</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./Pages/**/*.vue'</span>, { <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">eager</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span> })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">return</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">pages</span>[<span style="box-sizing: border-box;color: rgb(128, 203, 196) !important">`./Pages/${</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">name</span><span style="box-sizing: border-box;color: rgb(128, 203, 196) !important">}.vue`</span>]</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">setup</span>({ <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">el</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">props</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">plugin</span> }) {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">createApp</span>({ <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">render</span>: () <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=></span> <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">h</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App</span>, <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">props</span>) })</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">use</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">plugin</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">mixin</span>({<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">methods</span>: {<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">route</span>}}) <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 绑定</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">component</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Link'</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Link</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">component</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'Head'</span>, <span style="box-sizing: border-box;color: rgb(18, 170, 228) !important">Head</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            .<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">mount</span>(<span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">el</span>)</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">})</span>

第七步：运行并测试

<span style="color: rgb(0, 176, 240);">npm run dev</span>