在 Ember.js 中，我们可以使用 Query Params 的方式来在路由之间共享数据。这种方式非常方便，但是在多个 Query Params 之间切换的时候，可能会出现一些问题。比如说，当我们在一个页面上选择了一些筛选条件，然后跳转到了其他页面，再跳回原来的页面时，这些筛选条件可能还会被保留，导致页面状态出现混乱。
这时候，我们就需要一个能够清除 Query Params 的工具，而 npm 包 ember-reset-query-params 就是为此而生。本篇文章就来详细介绍如何使用这个工具。
安装
首先，在我们的 Ember.js 项目中，使用以下命令来安装这个工具：
$ npm install ember-reset-query-params
基础使用
安装完成之后，我们需要在使用 Query Params 的路由组件中引入这个工具并使用它。假设我们需要清除名为 page 和 category 的 Query Params，我们可以按照以下方式进行操作：
-- -------------------- ---- -------
------ ----- ---- -----------------------
------ - ---------------- - ---- ---------------------------
------ ------- --------------
------------ -
----- -
------------- ----
--
--------- -
------------- ----
-
--
-------- -
-- ------------
-------------- -
---------------------- -------- -------------
-
-
---在上面的代码中，我们首先引入了 resetQueryParams 方法。这个方法需要传入两个参数，第一个参数是当前路由组件实例，第二个参数是我们需要清除的 Query Params 列表。
其中，我们通过 queryParams 表示了需要使用的 Query Params，并且设置了 refreshModel 属性，表示每当这些 Query Params 发生变化时，都需要重新获取模型。在 resetFilters 方法中，当用户点击某个按钮时，我们就可以通过调用 resetQueryParams 方法来清除上述的 Query Params。
指定清除默认值
在上述代码中，我们清除的 Query Params 都是默认值。如果我们需要清除的是用户自己设定的值，就需要传入 defaultValue 属性。具体操作如下所示：
resetQueryParams(this, ['page'], { defaultValue: 1 });上面的代码就是清除名为 page 的 Query Param，并将其重置为 1。
指定新的 Query Params
在某些情况下，我们需要清除某些 Query Params 并且同时指定新的 Query Params。这时候，我们可以使用第三个参数 newQueryParams，如下所示：
resetQueryParams(this, ['page'], { newQueryParams: { category: 'books' } });上面的代码中，我们清除了名为 page 的 Query Param，同时指定了一个新的 Query Param category: 'books'。
总结
本文介绍了如何使用 npm 包 ember-reset-query-params 来清除在路由之间共享的 Query Params。通过本文的讲解，我们了解了如何使用这个工具的基础用法，以及如何指定清除默认值、指定新的 Query Params 等高级用法。这个工具能够帮助我们更加方便地管理和清除 Query Params，从而避免页面状态混乱的问题，非常值得我们去学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf6