Ember.js：为插件创建的现有路由添加子路由

嘿，这个需求其实很容易实现，Ember的路由映射系统天生支持这种场景——它会自动合并同一个父路由的配置，不管配置是来自插件还是应用本身。我给你一步步拆解解决方案：

1. 先明确插件的路由配置示例 #

假设你的插件里的configureRouter函数是这样的：

// 插件代码：比如 your-plugin-name/utils/configure-router.js
export function configureRouter(router) {
  router.map(function() {
    // 插件创建的父路由
    this.route('plugin-root', function() {
      // 插件自带的子路由
      this.route('plugin-child');
    });
  });
}

2. 应用中添加子路由的两种方式 #

方式一：直接在map回调中合并配置（最简单） #

在应用的router.js里，你只需要在调用插件的配置函数后，再次声明插件的父路由，并在其回调中添加你的子路由即可。Ember会自动合并这些配置，不会覆盖插件原有的子路由：

// 应用代码：router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { configureRouter as configurePluginRouter } from 'your-plugin-name';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  // 先调用插件的路由配置
  configurePluginRouter(this);

  // 给插件的plugin-root路由添加应用自定义的子路由
  this.route('plugin-root', function() {
    this.route('app-custom-child'); // 这就是你要加的子路由
  });
});

这样配置后，你访问/plugin-root/app-custom-child就能正常触发对应的路由，同时插件原有的/plugin-root/plugin-child也不受影响。

方式二：用常量避免硬编码（更健壮） #

如果担心后续插件修改路由名称导致应用出错，你可以让插件导出路由名称的常量，应用里导入使用：

// 插件代码：新增导出常量
export const PLUGIN_ROOT_ROUTE_NAME = 'plugin-root';

export function configureRouter(router) {
  router.map(function() {
    this.route(PLUGIN_ROOT_ROUTE_NAME, function() {
      this.route('plugin-child');
    });
  });
}

然后应用里这样用：

// 应用代码：router.js
import { configureRouter as configurePluginRouter, PLUGIN_ROOT_ROUTE_NAME } from 'your-plugin-name';

// ...

Router.map(function() {
  configurePluginRouter(this);

  this.route(PLUGIN_ROOT_ROUTE_NAME, function() {
    this.route('app-custom-child');
  });
});

原理说明 #

Ember的路由映射器在处理同一个路由名称的配置块时，会将它们的子路由、钩子等配置合并在一起，而不是覆盖。所以不管是插件先定义父路由，还是应用后添加，最终的路由树都会包含两者的子路由。

内容的提问来源于stack exchange，提问作者Steve H.