Laravel 10 + Vue 3中Axios Get请求无法返回数据问题

问题场景 #

使用Laravel 10搭配Vue 3组合式API开发发票页面，尝试通过Axios发送GET请求获取数据库中的发票数据并存入Vue的ref变量，但控制台打印response.data.invoices始终为undefined。

相关代码 #

发票页面模板 #

<div class="table--items" v-for="invoice in invoices" :key="invoice.id" v-if="invoices">
    <a href="#" class="table--items--transactionId">#{{invoice.id}}</a>
    <p>{{invoice.date}}</p>
    <p>#{{invoice.number}}</p>
    <p>{{invoice.customer_id}}</p>
    <p>{{invoice.due_date}}</p>
    <p> $ {{invoice.total}}</p>
</div>
<div class="table--items" v-else>
    <p>INVOICES NOT FOUND</p>
</div>

index.vue脚本 #

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

let invoices = ref([])
// lifecycle hook - when component mounts
onMounted(async () => {
    getInvoices()
})
const getInvoices = async () => {
    let response = await axios.get("/api/getInvoices")
    // invoices.value = response.data.invoices        
    console.log(response.data.invoices)
}
</script>

InvoiceController代码 #

public function getInvoices(){
    $invoices = Invoice::all();
    return response()->json([
        'invoices' => $invoices
    ],200);
}

Api.php路由 #

Route::get('/api/getInvoices',[InvoiceController::class, 'getInvoices']);

Web.php路由 #

Route::get('/', function () {
return view('welcome');
});

Route::get('/{pathMatch}', function (){
    return view('welcome');
})->where('pathMatch','.*');

bootstrap.js代码 #

import axios from 'axios';
window.axios = axios;    
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

问题排查与解决 #

1. 路由冲突（核心问题） #

Web.php中的通配路由/{pathMatch}会匹配所有请求路径，包括/api/getInvoices，导致API请求被Web路由接管，返回的是welcome视图的HTML内容，而非控制器返回的JSON数据，因此response.data.invoices自然为undefined。

解决方式二选一：

• 方式一：修改Web.php的通配路由，排除api开头的路径：

Route::get('/{pathMatch}', function (){
    return view('welcome');
})->where('pathMatch', '^(?!api).*$');

• 方式二：调整Api.php的路由，去掉多余的/api前缀（Laravel默认已为Api路由组添加/api前缀）：

Route::get('/getInvoices',[InvoiceController::class, 'getInvoices']);

2. 验证API响应结构 #

修改路由后，在浏览器开发者工具的Network标签中查看/api/getInvoices请求的响应内容：

• 如果返回JSON结构且包含invoices字段，说明API正常工作
• 如果仍无invoices字段，检查Invoice模型是否正确关联数据库表，以及数据库中是否存在发票数据（可在控制器中临时添加dd($invoices)确认数据是否获取成功）

3. 优化Vue代码 #

• 添加错误处理，便于调试请求异常：

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

let invoices = ref([])

onMounted(async () => {
    await getInvoices()
})
const getInvoices = async () => {
    try {
        const response = await axios.get("/api/getInvoices")
        console.log('完整响应:', response.data)
        invoices.value = response.data.invoices || []
    } catch (error) {
        console.error('请求失败:', error)
        console.error('错误响应:', error.response?.data)
    }
}
</script>

• 优化模板条件判断，因为invoices是数组，初始为空数组，v-if="invoices"永远为真，改为判断数组长度：

<div class="table--items" v-for="invoice in invoices" :key="invoice.id">
    <a href="#" class="table--items--transactionId">#{{invoice.id}}</a>
    <p>{{invoice.date}}</p>
    <p>#{{invoice.number}}</p>
    <p>{{invoice.customer_id}}</p>
    <p>{{invoice.due_date}}</p>
    <p> $ {{invoice.total}}</p>
</div>
<div class="table--items" v-if="invoices.length === 0">
    <p>INVOICES NOT FOUND</p>
</div>

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