熟悉WordPress开发的朋友很可能用过add_query_arg函数，他可以很方便的帮我们给一个URL添加新的查询参数获取新的URL。

随着WordPress古滕堡编辑器的开发，WordPress把这个函数移植到了JavaScript语言中，改函数的JS版本名字叫addQueryArgs，是作为@wordpress/url 库的一个函数发布的。今天通过一段代码为大家演示一下改函数的使用方法。

首先我们需要把这个库安装到我们的项目依赖中。

npm install @wordpress/url --save

然后我们就可以在项目中导入并使用addQueryArgs这个函数了。

import {addQueryArgs} from '@wordpress/url';

下面是我们开发的 nuxt 项目中的一个方法，主要用来根据多个条件筛选数据。首先我们构建了一个默认参数数组，然后根据用户点击的筛选项，给这个数组添加不同的元素。最后，把这个参数数组传入到addQueryArgs中，构建一个URL来请求 Rest API 查询数据。

fetchData() {
  let args = {
    'per_page'    : this.limit,
    'page'        : this.page,
    'categories'  : '9,10,11,12,13',
    'tax_relation': 'AND',
  };

  if (this.orderBy) {
    args.orderby = this.orderBy;
  }

  if (this.type) {
    args.huxing = this.type;
  }

  let exclude_cats = _.difference(_.rest(_.pluck(this.storeOptions, 'value')), [this.store]);

  if (this.store) {
    args.categories_exclude = exclude_cats;
  }

  if (this.level) {
    args.tags = this.level;
  }

  return this.$api.get(addQueryArgs('/api/posts', args));
},

可以看出，相对以前的使用JavaScript字符连接的方法，这种方法的代码可读性要好上很多，逻辑上也很清晰，非常方便后期维护。

除了本文介绍的addQueryArgs函数，@wordpress/url库中还提供了一些用来处理URL的非常实用的函数，比如：getQueryArgs,getQueryString等等，有需要在前端项目中处理URL的朋友可以试用一下。