EmberJS组件内点击跳转路由问题求助

嘿，刚接触EmberJS踩这种坑太正常啦！你遇到的问题核心是组件本身没有transitionTo方法——这个跳转方法是路由（Route）和控制器（Controller）的专属能力，直接在组件里调用肯定会报错哒。下面给你几种靠谱的解决方案：

方案1：注入Router服务（最直接的组件内跳转方式） #

Ember提供了router服务，我们可以把它注入到组件里，然后通过服务调用transitionTo：

// components/sample-card-header.js
import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  // 注入router服务
  router: service(),

  actions: {
    goToSamples() {
      // 通过router服务调用路由跳转
      this.router.transitionTo('samples');
    }
  }
});

别忘了在组件模板里把点击事件绑定到这个action，比如：

<!-- components/sample-card-header.hbs -->
<div {{action "goToSamples"}}>点击跳转到Samples页面</div>

方案2：通过Action向上传递（遵循Ember数据/动作流） #

如果想严格遵循Ember「数据向下传，动作向上发」的设计原则，可以把跳转动作传递到组件所在的父路由/控制器里处理：

第一步：组件内发送Action #

// components/sample-card-header.js
import Component from '@ember/component';

export default Component.extend({
  actions: {
    goToSamples() {
      // 把动作向上发送给父上下文
      this.sendAction('goToSamples');
    }
  }
});

第二步：父模板中接收并绑定Action #

假设你的组件是在某个路由模板（比如application.hbs）里使用的，要把父路由/控制器的action绑定给组件：

<!-- templates/application.hbs -->
{{sample-card-header goToSamples=(action "goToSamples")}}

第三步：父路由/控制器中实现跳转 #

在对应的路由或者控制器里定义这个action，调用transitionTo：

// routes/application.js
import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    goToSamples() {
      this.transitionTo('samples');
    }
  }
});

方案3：用Ember内置的link-to组件（最佳实践） #

如果只是简单的跳转需求，Ember官方更推荐用内置的{{link-to}}组件，它会自动生成符合规范的链接，并且处理路由跳转，完全不用手动写action：

<!-- components/sample-card-header.hbs -->
{{#link-to "samples"}}点击跳转到Samples页面{{/link-to}}

这个组件还支持传递模型参数、设置active状态等，非常灵活~

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