Vue Router调用push方法时如何正确设置可选查询参数？

我正在搭建一个带筛选与排序菜单的网站，当用户点击任意筛选项时，我希望将对应选中的筛选选项添加到URL中，再通过this.$router.push更新页面。当我同时传入所有筛选参数时功能可正常运行，但URL会展示全部筛选项，即使用户并未选中对应选项也会冗余展示；修改代码尝试仅传入已选中的可选查询参数后，代码无法正常运行，原代码如下：

processCheckedTags() {
            
    let queryParams = "";

    Object.assign(queryParams, 
        this.checkedTags !== [] ? {checkedTags: this.checkedTags} : null,
        this.checkedSales !== [] ? {checkedSales: this.checkedSales} : null,
        this.checkedRatings !== "" ? {checkedRatings: this.checkedRatings} : null,
        this.checkedDateAdded !== "" ? {checkedDateAdded: this.checkedDateAdded} : null,
        this.sortBy !== "" ? {sortBy: this.sortBy} : null,
        this.minPrice !== "" ? {minPrice: this.minPrice} : null,
        this.maxPrice !== "" ? {maxPrice: this.maxPrice} : null,
    );

    this.$router.push(
        { 
            path: this.$route.params.mainNavigation, 
            query: queryParams
        }
    );
}

需要实现在this.$router.push中正确添加可选查询参数，避免URL出现未选中的冗余参数。

原代码有三个核心问题：

1. queryParams初始值设为空字符串，Object.assign仅支持将属性合并到对象类型，传入字符串无法生成符合路由要求的查询参数对象
2. 数组判空逻辑完全失效：this.checkedTags !== []永远返回true，数组是引用类型，[]是新创建的空数组实例，和组件内维护的checkedTags内存地址不一致，永远不会相等
3. 合并源传入null虽然不会直接抛出错误，但配合前两个问题，最终生成的query对象完全不符合路由参数要求

直接初始化queryParams为空对象，修正判空逻辑：数组通过length属性判断是否有选中值，字符串判断是否非空，只有符合条件的参数才加入对象，代码可读性更高，也不会出现冗余参数：

processCheckedTags() {
    // 初始值必须为空对象，不能是空字符串
    const queryParams = {};

    // 数组类型筛选项通过length判断是否有选中值
    if (this.checkedTags.length) queryParams.checkedTags = this.checkedTags;
    if (this.checkedSales.length) queryParams.checkedSales = this.checkedSales;
    // 字符串/数值类型筛选项判断是否非空
    if (this.checkedRatings !== "") queryParams.checkedRatings = this.checkedRatings;
    if (this.checkedDateAdded !== "") queryParams.checkedDateAdded = this.checkedDateAdded;
    if (this.sortBy !== "") queryParams.sortBy = this.sortBy;
    if (this.minPrice !== "") queryParams.minPrice = this.minPrice;
    if (this.maxPrice !== "") queryParams.maxPrice = this.maxPrice;

    this.$router.push({
        path: this.$route.params.mainNavigation,
        query: queryParams
    });
}

如果要保留Object.assign的写法，只要修正初始值和判空逻辑即可，注意不要传null作为合并源，统一传空对象：

processCheckedTags() {
    const queryParams = Object.assign(
        {}, // 初始值传入空对象
        this.checkedTags.length ? {checkedTags: this.checkedTags} : {},
        this.checkedSales.length ? {checkedSales: this.checkedSales} : {},
        this.checkedRatings !== "" ? {checkedRatings: this.checkedRatings} : {},
        this.checkedDateAdded !== "" ? {checkedDateAdded: this.checkedDateAdded} : {},
        this.sortBy !== "" ? {sortBy: this.sortBy} : {},
        this.minPrice !== "" ? {minPrice: this.minPrice} : {},
        this.maxPrice !== "" ? {maxPrice: this.maxPrice} : {}
    );

    this.$router.push({
        path: this.$route.params.mainNavigation,
        query: queryParams
    });
}

补充：如果筛选项的初始值可能是null或者undefined，数组判空可以改成Array.isArray(this.checkedTags) && this.checkedTags.length，避免读取length属性时报错。

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