vue.jsnuxt.jsvue-routernuxt-link

vue-router : how to append another query value to existing query values?

i have three different route-link and i want when you click on each of them ,

a value query added to other queries

<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

the problem is that when you click each of them new query replace other

but i want it to append with other queries

so , how can i do it ?

Solution

  • You have to extend the existing query object yourself:

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