如何捕获Ember中仅queryParams变更的过渡并决定是否中止？

我完全懂你遇到的这个痛点——在Ember里想拦截路由过渡做前置检查，大部分场景都没问题，但碰到只改queryParams的link-to时，调用transition.abort()不仅会触发过渡循环，页面还照样按新参数刷新，而且官方又没有现成的queryParamsWillChange钩子，确实挺闹心的。

咱们先捋清楚问题根源：Ember对完整路由跳转和同一路由下的queryParams变更的处理逻辑是不一样的。当你用{{#link-to (query-params date=nextWeek)}}时，触发的过渡本质是同一路由内的参数更新，willTransition钩子触发后调用abort()，但Ember内部的路由状态可能已经记录了新的queryParams，导致它反复尝试完成过渡，最终绕开了你的拦截。

下面给你两个实用的解决方案，你可以根据自己的业务场景选择：

方案一：在willTransition中精准区分并手动重置URL #

这种方案可以保留你原来的link-to写法，核心是在willTransition里判断是否是同一路由下的queryParams变更，拦截后手动重置URL避免循环：

// 路由代码
actions: {
  willTransition(transition) {
    // 第一步：判断是否是当前路由下的queryParams变更
    const isSameRoute = transition.targetName === this.routeName;
    if (isSameRoute) {
      // 获取当前控制器的旧queryParams
      const oldQuery = { ...this.controller.getProperties(this.controller.queryParams) };
      // 获取过渡目标的新queryParams
      const newQuery = transition.to.queryParams;

      // 第二步：对比新旧参数，确认是否有变更
      const hasQueryChanged = Object.keys(newQuery).some(key => {
        // 注意：如果参数是日期/对象类型，需要做类型兼容的对比，比如转字符串
        return String(newQuery[key]) !== String(oldQuery[key]);
      });

      if (hasQueryChanged) {
        // 第三步：执行你的前置检查逻辑（比如弹窗确认）
        const shouldProceed = confirm('确定要切换日期吗？');
        if (!shouldProceed) {
          // 关键：abort后手动切回旧参数，避免Ember再次触发过渡
          this.controller.transitionToRoute({ queryParams: oldQuery });
          transition.abort();
          return false;
        }
      }
    }
    // 非同一路由的跳转，按原有逻辑处理
  }
}

这里的关键是手动重置URL——因为transition.abort()并不会自动把浏览器URL改回旧参数，Ember会误以为用户还是想要更新queryParams，所以必须主动调用transitionToRoute切回旧状态，打断循环。

方案二：通过控制器手动控制queryParams变更 #

如果你愿意调整模板的交互方式，可以把link-to改成按钮触发动作，在控制器里先做检查，再决定是否允许更新queryParams，彻底避免自动触发的过渡问题：

控制器代码 #

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class YourRouteController extends Controller {
  queryParams = ['date'];
  date = null;
  // 标记是否允许queryParams变更
  _allowQueryChange = false;

  @action
  handleNextWeek() {
    // 先执行你的前置检查
    const shouldProceed = confirm('确定要切换到下周吗？');
    if (shouldProceed) {
      this._allowQueryChange = true;
      // 允许变更时再跳转
      this.transitionToRoute({ queryParams: { date: this.nextWeek } });
      // 重置标记，防止后续意外变更
      setTimeout(() => this._allowQueryChange = false, 0);
    }
  }

  queryParamsDidChange(changed, total, removed) {
    // 如果没有允许标记，就回滚到旧参数
    if (!this._allowQueryChange) {
      this.transitionToRoute({ queryParams: { date: this.date } });
    }
  }
}

模板代码 #

{{!-- 把原来的link-to改成按钮触发动作 --}}
<button {{on 'click' this.handleNextWeek}}>next</button>

这种方式更灵活，完全把queryParams的变更控制权握在自己手里，适合需要复杂前置检查的场景。

补充说明 #

目前Ember官方确实没有提供queryParamsWillChange钩子，但通过上面两种方式，完全可以模拟出类似的“前置拦截”效果。需要注意的是，在对比queryParams时，一定要考虑参数的类型（比如日期、数字可能会被转成字符串），确保对比逻辑准确。

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