如何在Ember.Route类的queryParamsDidChange方法中修改查询参数？

我明白你遇到的困扰了——直接修改this.queryParams.page或者paramsFor返回的对象完全没用，这是因为Ember对查询参数的管理有特定机制，直接改这些对象根本不会触发路由的状态更新。下面给你两种靠谱的解决方案：

方法一：用queryParamsDidChange Action监听参数变化 #

Ember路由内置了queryParamsDidChange这个action，专门用来处理查询参数的变更。我们可以在这个钩子里面判断type是否变化，然后重置page参数：

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    page: { refreshModel: true },
    type: { refreshModel: true }
  },

  model(params) {
    return this.store.query('posts', params);
  },

  actions: {
    queryParamsDidChange(changedParams, previousParams) {
      // 检查type参数是否发生了变化
      if ('type' in changedParams && previousParams.type !== changedParams.type) {
        const currentPage = this.controller.get('page');
        // 如果当前page不是默认值1，就重置
        if (currentPage !== 1) {
          // 使用replaceWith不会在浏览器历史中添加新记录，适合参数重置场景
          this.replaceWith(this.routeName, {
            queryParams: {
              type: changedParams.type,
              page: 1
            }
          });
        }
      }
    }
  }
});

方法二：在Model钩子中直接修正参数（适合简单场景） #

如果你不想额外加action，也可以在model钩子里面判断参数变化，直接跳转重置page：

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    page: { refreshModel: true },
    type: { refreshModel: true }
  },

  model(params) {
    const previousParams = this.paramsFor(this.routeName);
    // 排除首次进入的情况，判断type是否变化且page不是1
    if (previousParams && previousParams.type !== params.type && params.page !== 1) {
      // 跳转并重置page，同时取消当前的model请求避免冲突
      this.transitionTo(this.routeName, { queryParams: { ...params, page: 1 } });
      return Ember.RSVP.reject('已重置page参数');
    }
    return this.store.query('posts', params);
  }
});

为什么你之前的方法无效？ #

• this.queryParams是路由中定义的查询参数配置对象，不是当前路由的实际参数值，修改它不会影响当前的路由状态。
• this.paramsFor(this.routeName)返回的是当前参数的只读快照，直接修改这个对象不会触发Ember的参数更新机制，所以URL和页面数据都不会变化。

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