如何在 Ember 2.16 中安全获取并跳转至上一页面路由名（用于返回按钮）-js教程-PHP中文网

本文介绍在 Ember 2.16 中实现“智能返回”功能的两种可靠方案：优先推荐原生 history.back() 的轻量解法，其次提供基于 Ember 路由过渡（Transition）存储的可追溯方案，兼顾兼容性与语义化，无需修改现有 {{link-to}} 代码。

本文介绍在 ember 2.16 中实现“智能返回”功能的两种可靠方案：优先推荐原生 `history.back()` 的轻量解法，其次提供基于 ember 路由过渡（transition）存储的可追溯方案，兼顾兼容性与语义化，无需修改现有 `{{link-to}}` 代码。

在 Ember 应用中，当用户从多个入口（如 user.index 和 profile.index）跳转至共享路由（如 settings.analytic）时，为提升用户体验，返回按钮应精准跳转回来源页面，而非固定路由。Ember 2.16 虽较旧，但可通过以下两种方式优雅解决该需求，且均不侵入现有 {{#link-to 'settings.analytic'}} 模板代码。

✅ 推荐方案：使用原生 history.back()（简洁、可靠、零耦合）

浏览器 history API 提供了标准的导航回退能力，完全适用于本场景——只要用户是通过正常导航（如 link-to、transitionTo 或点击链接）进入 settings.analytic，history.back() 即可准确返回上一页，无需记录路由名、无需状态管理、无兼容性风险。

在 analytic 路由对应的组件或控制器中，定义一个返回动作：

// app/controllers/settings/analytic.js
import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    goBack() {
      window.history.back();
    }
  }
});

模板中直接调用：

<!-- app/templates/settings/analytic.hbs -->
<button this.goback class="back-button">
  ← 返回上一页
</button>

⚠️ 注意事项：

Skill Weave Chains — 技能链路由引擎
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

此方法依赖浏览器历史栈，若用户通过刷新或直接 URL 访问 settings.analytic，history.back() 将返回到前一标签页或空白页（取决于浏览器行为），属预期行为；

不适用于需强制跳转至特定命名路由（如必须跳 user.index 而非仅“上一页”）的业务逻辑；

完全符合 Web 标准，性能最优，推荐作为默认选择。

? 进阶方案：存储并重放 Transition（精确控制路由名）

若业务强要求获取上一页面的完整路由名字符串（例如用于日志、条件判断或 fallback 路由），可利用 Ember 2.16 支持的 transition 存储机制。核心思路是在跳转至 settings.analytic 前，将当前路由信息暂存至服务或控制器，再在目标路由中读取。

创建路由服务（推荐集中管理）

// app/services/route-history.js
import Service from '@ember/service';

export default Service.extend({
  previousRouteName: null,
  previousModels: null,

  remember(currentTransition) {
    this.set('previousRouteName', currentTransition.from.name);
    this.set('previousModels', currentTransition.from.contexts || []);
  },

  clear() {
    this.set('previousRouteName', null);
    this.set('previousModels', null);
  }
});

在所有可跳转来源路由中注入并调用 remember()
以 user.index 为例（profile.index 同理）：

// app/routes/user/index.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  routeHistory: service(),

  actions: {
    willTransition(transition) {
      // 在离开当前路由前，记录自身信息
      if (transition.to.name === 'settings.analytic') {
        this.routeHistory.remember(transition);
      }
    }
  }
});

在 settings.analytic 中读取并跳转

// app/controllers/settings/analytic.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default Controller.extend({
  routeHistory: service(),

  @action
  goBackToPrevious() {
    const { previousRouteName, previousModels } = this.routeHistory;
    if (previousRouteName) {
      this.transitionToRoute(previousRouteName, ...previousModels);
    } else {
      // fallback：退回到历史栈
      window.history.back();
    }
  }
});