第一种

let query = {
    productName: item.label,
    productId: item.id
}
this.$router.push({path: this.$route.path, query: query})


// 使用如下方式不起作用
this.$route.query.productName = item.label;
this.$route.query.productId= item.id;

第二种

import merge from 'webpack-merge';

//如果路由没有参数name,就新增一个参数，如果有的话，就是修改name的值
this.$router.push({
    query:merge(this.$route.query,{'name':'小米'})
});

this.$router.replace({
    query: merge(this.$route.query, {'name':'小米'})
});

//可以修改多个参数
this.$router.push({
    query: merge(this.$route.query, {
        'name': '小米',
        'age':'9'
    })
});
 
this.$router.replace({
    query: merge(this.$route.query, {
        'name': '小米',
        'age':'9'
    })
});

//替换所有的参数
this.$router.push({
    query:merge({},{'name':'小米'})
}) 

this.$router.replace({
    query:merge({},{'name':'小米'})
})

replace()和push() 的区别

1. this.$router.push() 
描述：此方法会向history栈添加一个记录，返回this.$router.back()会返回到上一个页面。

2.this.$router.replace() 
描述：此方法不会向history里面添加新的记录，返回this.$router.back()会直接跳转到上上一个页面。