Vue.js结合Laravel8使用axios向控制器传参失败问题

你当前的写法踩了Axios GET请求传参的常见误区：

• Axios发起GET请求时，第二个传入的参数是请求全局配置对象，只有配置对象中params字段下的内容，才会被自动序列化为URL查询参数发送到后端
• 你之前在配置对象顶层直接写的opciones: options属于自定义非标准字段，Axios完全不会把它发送到服务端，只会把它保留在本地的请求配置实例里——这就是你在Network面板看不到参数、后端拿不到值的核心原因。

1. 修改Vue组件中cargar方法的请求参数结构，把需要传递的配置参数挪到params字段下，和后端取参的键名保持一致：

cargar(url = this.url, options = this.tableProps){
    axios.get(url, {
        // 所有需要传给后端的查询参数，必须放在params配置项中
        params: {
            opciones: options
        }
    })
    .then((response) => {
        this.data = response.data;
        console.log(response);
    })
    .catch((error) => console.error(error));
},
reloadTable(tableProps) {
    this.cargar(this.url, tableProps);
}

2. 后端控制器的取参逻辑不需要大改，用更规范的调试方式验证参数接收情况：

public function getAllUsers(Request $request){
    // 直接取对应键名的参数，即可拿到完整的tableProps结构
    $tableConfig = $request->get('opciones');
    // 调试时用dd()替代print_r+exit，输出更清晰
    dd($tableConfig);
    
    // 后续业务逻辑可直接使用拿到的配置做查询、分页、排序
    return response()->json(User::paginate($tableConfig['length'] ?? 10));
}

改完后触发一次表格加载，打开浏览器Network面板找到对应GET请求：

• 可以在请求URL中看到自动拼接的查询参数，形式为?opciones[search]=xxx&opciones[length]=100&opciones[column]=id&opciones[dir]=asc
• 后端收到请求后能完整打印出传入的表格配置对象，后续切换表格排序、修改每页条数、触发搜索时，只要更新tableProps的值调用reloadTable方法，最新的配置参数就会自动同步传给后端。

补充说明：

• 注意区分不同请求方法的传参逻辑：GET请求的URL查询参数必须放在配置对象的params字段下，POST请求的请求体参数需要放在配置对象的data字段下，二者不要混用。
• 如果你不希望传嵌套结构的参数，也可以直接把tableProps的属性平铺展开到params里，对应后端直接通过$request->get('search')这类方式单独取值即可，只要前后端参数键名匹配就能正常接收。

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