Laravel+Inertia项目子文件夹页面渲染失败问题求助

在Laravel+Inertia项目的pages目录下新建Accounting子文件夹，存放Journal.vue、Cash Vouchers.vue、CVPrint.vue等页面文件后，页面无法正常渲染，错误表现为渲染路径使用点号(.)而非斜杠(/)。

目录结构 #

directory
|_pages
    |_Accounting(new created folder)
       |_Journal.vue
       |_Cash Vouchers.vue
       |_CVPrint.vue
    |_Components
    |_Layouts
    |_Auth
|_dashboard.vue    

Web.php路由配置 #

Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
Route::get('/about', function () {
    return Inertia::render('About');
})->name('about');
Route::get('/settings', function () {
    return Inertia::render('Settings');
})->name('settings');
Route::get('/journal', function () {
    return Inertia::render('Accounting.Journal');
})->name('journal');
Route::get('/cvprint', function () {
    return Inertia::render('Accounting.CVPrint');
})->name('cvprint');
Route::get('/cashvoucher', function () {
    return Inertia::render('Accounting.CashVoucher');
})->name('cashvoucher');
});

Sidebar.vue导航代码 #

<li>
    <NavlinkCustom :href="route('cashvoucher')" class="flex items-center py-2 px-4  hover:bg-gray-950 hover:text-gray-100 rounded-md"
            :active="$page.component==='CashVoucher'"
        >
        <i class="ri-money-dollar-circle-line"></i>
        <span class="text-sm">Cash Voucher</span>
    </NavlinkCustom>
</li>
<li>
    <NavlinkCustom :href="route('cvprint')" class="flex items-center py-2 px-4  hover:bg-gray-950 hover:text-gray-100 rounded-md"
            :active="$page.component==='CVPrint'"
        >
        <i class="ri-currency-line"></i>
        <span class="text-sm">CV Printing</span>
    </NavlinkCustom>
</li>
<li>
    <NavlinkCustom :href="route('journal')" class="flex items-center py-2 px-4  hover:bg-gray-950 hover:text-gray-100 rounded-md"
            :active="$page.component==='Journal'"
        >
        <i class="ri-currency-line"></i>
        <span class="text-sm">Journal Entry</span>
    </NavlinkCustom>
</li>

问题原因及解决步骤 #

核心问题 #

1. 文件名不符合Inertia组件规范：Cash Vouchers.vue包含空格，Inertia无法正确识别带空格的文件名，且路由中引用的Accounting.CashVoucher与文件名不匹配。
2. 导航激活判断逻辑错误：子目录下的组件，$page.component的值包含父目录路径，而非单独的组件名。

解决步骤 #

1. 修正文件名
   将Cash Vouchers.vue重命名为CashVoucher.vue，确保文件名与路由中Inertia::render('Accounting.CashVoucher')的组件名完全对应。

2. 修正导航激活判断
   子目录组件的$page.component实际值为Accounting.Journal、Accounting.CashVoucher或Accounting.CVPrint（可通过console.log($page.component)确认），修改导航中的:active判断：

   <!-- Cash Voucher 导航 -->
   :active="$page.component==='Accounting.CashVoucher'"
   <!-- CV Printing 导航 -->
   :active="$page.component==='Accounting.CVPrint'"
   <!-- Journal Entry 导航 -->
   :active="$page.component==='Accounting.Journal'"
   

3. 清理缓存并重新编译
   运行以下命令确保缓存清理和前端资源更新：

   php artisan cache:clear
   php artisan view:clear
   npm run dev # 开发环境执行，生产环境使用 npm run build
   

内容的提问来源于stack exchange，提问作者Raymart Calinao