Ember 2.16中如何获取前路由名实现返回按钮功能

1. 在settings.analytic路由中记录来源路由 #

修改app/routes/settings/analytic.js，在路由初始化时捕获来源路由并传递给控制器：

import Route from '@ember/routing/route';

export default class SettingsAnalyticRoute extends Route {
  setupController(controller, model) {
    super.setupController(controller, model);
    // 获取跳转来源的路由名称
    const sourceRoute = this.router.currentTransition?.from?.name;
    if (sourceRoute) {
      controller.set('sourceRoute', sourceRoute);
    }
  }
}

2. 在控制器中定义返回Action #

在app/controllers/settings/analytic.js中添加处理跳转的action，支持自动返回来源或手动指定目标路由：

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

export default class SettingsAnalyticController extends Controller {
  sourceRoute = null;

  @action
  goBackToSource(targetRoute) {
    // 优先使用传入的目标路由，无传入则用自动记录的来源路由
    const target = targetRoute || this.sourceRoute;
    if (target) {
      this.transitionToRoute(target);
    } else {
      // 无有效路由时的降级处理，可根据需求修改
      this.transitionToRoute('index');
    }
  }
}

3. 在Analytic页面模板中调用Action #

返回按钮直接绑定该action，默认自动返回来源页，也可手动指定目标路由：

<!-- 自动返回来源页面 -->
<button {{action 'goBackToSource'}}>返回</button>

<!-- 手动指定返回目标（比如强制返回user页） -->
<button {{action 'goBackToSource' 'user'}}>返回用户页</button>

该方案无需修改现有的{{#link-to 'settings.analytic'}}{{pageName}}{{/link-to}}跳转代码，完全通过action实现需求，同时支持手动指定目标路由的场景。

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