Shopware 6 Admin API：如何正确构建带筛选参数的URL

需求说明 #

需要在商品列表页生成带有指定筛选条件的动态链接，目标URL要求如下：

编码格式 #

/sw/product/index?limit=25&page=1&sortBy=productNumber&sortDirection=DESC&naturalSorting=false&grid.filter.product=%257B%2522visibilities-filter%2522%253A%257B%2522value%2522%253A%255B%257B%2522id%2522%253A%252298432def39fc4624b33213a56b8c944d%2522%252C%2522name%2522%253A%2522Headless%2522%257D%255D%252C%2522criteria%2522%253A%255B%257B%2522type%2522%253A%2522equalsAny%2522%252C%2522field%2522%253A%2522visibilities.salesChannel.id%2522%252C%2522value%2522%253A%252298432def39fc4624b33213a56b8c944d%2522%257D%255D%257D%257D

解码格式 #

/sw/product/index?limit=25&page=1&sortBy=productNumber&sortDirection=DESC&naturalSorting=false&grid.filter.product={"visibilities-filter":{"value":[{"id":"98432def39fc4624b33213a56b8c944d","name":"Headless"}],"criteria":[{"type":"equalsAny","field":"visibilities.salesChannel.id","value":"98432def39fc4624b33213a56b8c944d"}]}}

尝试的实现方式及问题 #

使用router-link传递嵌套对象作为查询参数：

<router-link :to="{
    name: 'sw.product.index', 
    query:{    
        'grid.filter.product':{
            'visibilities-filter':{
                'value':[{'id':'98432def39fc4624b33213a56b8c944d','name':'Headless'}],
                'criteria':[{
                    'type':'equalsAny',
                    'field':'visibilities.salesChannel.id',
                    'value':'98432def39fc4624b33213a56b8c944d'
                }]
            }
        }
    }
}">
    0 Produkte zugeordnet
</router-link>

但生成的URL错误，对象被转成了字符串[object Object]：

http://0.0.0.0:8080/#/sw/product/index?grid.filter.product=%5Bobject%20Object%5D

正确解决方案 #

Vue Router的query参数仅支持字符串或字符串数组类型，直接传递对象会调用toString()方法，导致生成[object Object]。正确做法是：

1. 将嵌套的筛选对象序列化为JSON字符串
2. 对JSON字符串进行URI编码

修改后的router-link代码：

<router-link :to="{
    name: 'sw.product.index', 
    query:{    
        limit: 25,
        page: 1,
        sortBy: 'productNumber',
        sortDirection: 'DESC',
        naturalSorting: false,
        'grid.filter.product': encodeURIComponent(JSON.stringify({
            'visibilities-filter':{
                'value':[{'id':'98432def39fc4624b33213a56b8c944d','name':'Headless'}],
                'criteria':[{
                    'type':'equalsAny',
                    'field':'visibilities.salesChannel.id',
                    'value':'98432def39fc4624b33213a56b8c944d'
                }]
            }
        }))
    }
}">
    0 Produkte zugeordnet
</router-link>

相关官方说明 #

Vue Router文档中明确指出，query参数的类型为Record<string, string | (string | null)[]>，复杂对象需要自行序列化为字符串后传递。当路由解析时，后端或前端可以通过URI解码后解析JSON字符串恢复原始筛选条件。

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