Laravel+Vue项目中Vue Router多级路由404问题求助

核心问题原因 #

你当前Laravel的兜底路由Route::get("{any?}", ...)中的{any?}默认仅匹配单段URL路径（不含斜杠的部分），当访问/blog/test这类多级路径时，Laravel无法匹配到该路由，直接返回404，而非将请求交给Vue Router处理。

解决方案 #

修改routes/web.php中的兜底路由，让它匹配所有层级的URL路径：

方法1：使用正则匹配所有路径

替换原兜底路由代码：

Route::get('/{any}', function () {
    return view('guests.home');
})->where('any', '.*');

方法2：使用Laravel内置的fallback方法（Laravel 5.6+支持）

更简洁的写法：

Route::fallback(function () {
    return view('guests.home');
});

验证步骤 #

1. 保存路由修改后，执行php artisan route:clear清除路由缓存（或者重启php artisan serve）
2. 访问/blog/test或其他多级路由，此时Laravel会返回SPA入口文件，Vue Router将正常接管路由并渲染对应组件

额外说明 #

• 你的Vue Router配置（history模式、路由规则）、组件代码均无问题，之前单段路由（/、/blog）能正常工作，正是因为这些路径符合{any?}的单段匹配规则
• 无需调整Vue Router版本或系统环境，问题根源仅在Laravel路由的匹配范围

内容的提问来源于stack exchange，提问作者Matteo Ruggieri