为什么我的惯性链接不呈现页面?(InertiaJS)

Question

问题

当我点击我的惯性链接，URL在浏览器中改变，但页面或Vue组件不呈现。但是，当我单击链接并手动重新加载页面时，页面确实被呈现。

请帮帮我!我甚至不知道如何调试这种问题!🤔🙇

解释如何调试这个也会很好🧡

我已经试过了

• 我尝试使用<Link>,<InertiaLink>和<inertia-link>组件。
• 我尝试在main.ts文件中添加createApp()上的.component('inertia-link', Link)。(从这个线程的第一个答案:Vue组件不渲染时，我使用<惯性链接>标签)
• 我试着改变我的Laravel路线从Route::inertia('url', 'Component')到Route::get('url', function () { inertia('Component'); } )
• 我尝试了其他浏览器。
• 我检查了控制台是否有错误，但是没有错误。

我的代码web.php

<?php
use IlluminateSupportFacadesRoute;
Route::inertia('/', 'HomePage');
Route::inertia('/test', 'TestPage');

main.ts

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
InertiaProgress.init({
color: "#ffffff",
});
createInertiaApp({
resolve: (name) => require(`./pages/${name}`),
setup({ el, app, props, plugin }) {
createApp({ render: () => h(app, props) })
.use(plugin)
.mount(el);
},
});

Layout.vue

<template>
<header>
<ul>
<li>
<Link href="/">
Home
</Link>
</li>
<li>
<Link href="/test">
Test
</Link>
</li>
</ul>
</header>
<main>
<slot/>
</main>
</template>
<script setup lang="ts">
import {Link} from "@inertiajs/inertia-vue3";
</script>

当我点击链接时，在我的开发人员工具请求日志中显示的内容:

开发人员工具截图

Answer 1

你有没有你的" testpage ";组件在与"主页"目录不同的目录下?

我不是很确定，但是如果你在"页面"中创建了另一个目录目录，您需要在主目录中指定。查找要呈现的其他文件，如下所示:

resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))