Laravel Pinia中Axios Get请求可获取数据但URL参数不显示

核心原因 #

AJAX异步请求不会自动修改浏览器地址栏，同时你的参数处理存在两处问题：

1. 使用URLSearchParams传递对象类型参数时，会被转为[object Object]，导致后端无法正确解析
2. GET请求无需携带_token参数（Laravel的CSRF保护仅针对POST/PUT/DELETE等请求）

解决方案 #

1. 修正参数生成逻辑 #

直接返回普通对象，让Axios自动处理参数序列化，同时移除不必要的_token：

getters: {
    axiosParams() {
        return {
            q: this.q,
            availableNamesOnly: this.filters.availableNamesOnlyEnabled,
            // 对象类型参数转JSON字符串，方便后端解析
            selectedTlds: JSON.stringify(this.filters.selectedTlds),
            priceRange: JSON.stringify(this.filters.priceRange)
        };
    }
},

2. 手动更新地址栏 #

AJAX请求不会刷新地址栏，需用history.pushState手动修改URL，同时优化代码避免全局变量污染：

actions: {
    fetchSearchResults() {
        const params = this.axiosParams;
        // 将参数转为URL查询字符串
        const queryString = new URLSearchParams(params).toString();
        // 修改地址栏（不刷新页面）
        window.history.pushState({}, '', `/search/?${queryString}`);

        axios.get('/search/', { params })
        .then(response => {
            this.results.defaultResults = response.data.defaultResults;
            this.results.allEndingsResults = response.data.allEndingsResults;
            this.results.aiResults = response.data.aiResults;
            this.results.seoResults = response.data.seoResults;
            this.results.funResults = response.data.funResults;
            this.results.mixResults = response.data.mixResults;
            this.results.hasResults = response.data.hasResults;
            this.results.display = response.data.display;
            console.log(response.data);
        })
        .catch(error => console.log(error));
    },
}

3. 后端参数解析（可选） #

如果传递了JSON字符串格式的参数，Laravel后端可以这样解析：

$selectedTlds = json_decode($request->input('selectedTlds'), true);
$priceRange = json_decode($request->input('priceRange'), true);

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