Vue Router Push 如何设置可选的查询参数？

Question

我正在构建一个带有筛选和排序菜单的网站。当用户单击其中一个过滤器时，我希望将该过滤器选项添加到 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 添加可选查询？

Answer 1

在 lodash pickBy 的帮助下，您可以非常简洁地重写您需要的内容：

processCheckedTags() {
    const params = {
        checkedTags: this.checkedTags,
        checkedSales: this.checkedSales,
        checkedRatings: this.checkedRatings,
        checkedDateAdded: this.checkedDateAdded,
        sortBy: this.sortBy,
        minPrice: this.minPrice,
        maxPrice: this.maxPrice,
    };

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

Answer 2

尝试将过滤器数组定义为字符串，然后遍历它们并仅分配具有有效值的属性：


let filters=['checkedTags', 'checkedSales', 'checkedRatings', 'checkedDateAdded', 'sortBy', 'minPrice', 'maxPrice']

let queryParams=filters.reduce((acc,curr)=>{
   if (this[curr]!==[] || this[curr]!==''){
      acc[curr]=this[curr]
   }
  return acc
 },{})

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

Vue Router Push 如何设置可选的查询参数？

Vue Router Push How To Set Optional Query Parameters?

vue.js

vue-router4