Laravel9+Vue3路由异常：刷新/输入URL显示[object]

问题原因 #

直接输入/users或刷新页面时，Laravel路由会优先匹配到Route::resource('users', UserController::class)的GET /users接口路由，返回用户数据的JSON格式内容。浏览器将JSON对象直接解析显示，就出现了[object]的异常。而点击菜单跳转是通过Vue前端路由实现的，不会触发页面刷新，之后通过axios异步请求/users接口获取数据渲染页面，所以显示正常。

解决方案 #

方案一：给API接口添加前缀（推荐） #

将后端API路由统一放到/api前缀下，和前端页面路由区分开：

1. 修改web.php路由：

// 后端API接口，统一/api前缀
Route::prefix('api')->group(function () {
    Route::resource('users', UserController::class);
});

// SPA页面兜底路由，仅匹配非/api开头的路径
Route::get('{view}', ApplicationController::class)->where('view', '^(?!api).*$');

2. 修改Vue中axios请求路径：

const getUsers = () => {
    axios.get('/api/users')
        .then((response) => {
            users.value = response.data;
        })
}

这样直接访问/users时，会匹配到SPA兜底路由返回Vue页面，页面加载后通过/api/users请求数据，正常渲染内容。

方案二：修改兜底路由的匹配规则 #

如果不想添加/api前缀，可以调整兜底路由的正则，排除已有的前端页面路径：

修改web.php：

Route::resource('users', UserController::class);
// 排除users、dashboard等前端路由路径，仅匹配其他未定义的路径
Route::get('{view}', ApplicationController::class)->where('view', '^(?!users|dashboard).*$');

注意：后续新增前端路由时，需要同步更新这里的排除规则，否则会出现同样的问题。

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