vue.js - vue-router：如何将另一个查询值附加到现有查询值？

Question

我有三个不同的路由链接，当您单击每个链接时，我想要，

添加到其他查询的值查询

<router-link append to="{query:{ color : 'red' }" >color</router-link> => ex.com/product?color=red
<router-link append to="{query:{ size: 2 }" >size</router-link> => ex.com/product?color=red&&size=2
<router-link append to="{query:{ men: true }" >men</router-link> => ex.com/product?color=red&&size=2&&men=true

问题是当您单击它们中的每一个时，新查询替换其他

但我希望它附加其他查询

那么，我该怎么做呢？

Answer 1

您必须自己扩展现有的查询对象：

<router-link append :to="{ query: { ...$route.query, color: 'red' } }">
                                    ^^^^^^^^^^^^^^^