Ember组件中动作执行完成后如何实现页面重定向？

嘿，刚看到你的问题！作为Ember老玩家，给你分享两种实用的解决办法，适配你用的3.0.4版本～

方法一：把路由的重定向逻辑传到组件（推荐） #

组件本身没有路由跳转的能力，所以最好的方式是把路由里的动作（action）传递给组件，这样既保持组件的复用性，又能利用路由的transitionTo方法实现跳转。

1. 在路由模板里调用组件时传入action
   假设你的组件叫user-form，在路由模板里这样写：

   {{user-form model=model saveAndRedirect=(action 'saveAndRedirect')}}
   

2. 在路由文件里定义对应的action
   打开你的路由文件（比如app/routes/user/edit.js），添加处理保存和跳转的逻辑：

   import Route from '@ember/routing/route';
   
   export default Route.extend({
     actions: {
       async saveAndRedirect(model) {
         try {
           // 等待保存完成
           await model.save();
           // 跳转到目标路由，比如用户列表页
           this.transitionTo('users.index');
         } catch (error) {
           // 处理保存失败的情况，比如给用户提示错误
           alert('保存失败，请稍后重试');
           console.error('保存出错:', error);
         }
       }
     }
   });
   

3. 在组件里调用传入的action
   组件里的保存按钮动作直接触发这个传入的action就行：

   import Component from '@ember/component';
   
   export default Component.extend({
     actions: {
       save() {
         // 调用路由传进来的action，把model传过去
         this.get('saveAndRedirect')(this.get('model'));
       }
     }
   });
   

方法二：在组件里注入Router服务（快速实现） #

如果你的组件不需要复用，只是临时用在某个路由下，也可以直接在组件里注入router服务来实现跳转：

import Component from '@ember/component';
import { inject as service } from '@ember/service';

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

  actions: {
    async save() {
      try {
        await this.get('model').save();
        // 用router服务跳转到目标路由
        this.get('router').transitionTo('users.index');
      } catch (error) {
        alert('保存失败');
        console.error(error);
      }
    }
  }
});

⚠️ 注意：这种方式会让组件和路由耦合，以后如果要在其他路由里复用这个组件，跳转逻辑就固定死了，所以优先推荐第一种方法哦～

如果还有不清楚的地方，随时问我！

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