在余烬插件中实现路由

Question

我是余烬的新手。我计划创建一个插件以在整个应用程序中共享。我的插件有屏幕可以导航。我不知道如何在余烬插件中应用路由或实现路由。此外，我还想与消费应用程序共享插件。谁能提出任何关于如何实现的简单例子？

Answer 1

选择Ember 附加组件进行功能共享是一个不错的选择。但是，附加组件主要用于添加/增强更集中的功能。

为了跨应用程序重用/共享页面(路由(，Ember有一个名为Ember-Engines的特定解决方案。

根据官方指南，

引擎允许从用户的角度将多个逻辑应用程序组合成单个应用程序。

因此，我们可以在引擎中拥有多个页面(类似于任何其他独立的 Ember 应用程序(，并轻松地将这些页面挂载到主机应用程序中。

Answer 2

Ember 插件的app文件夹与消费应用程序的app文件夹合并。虽然这主要用于提供组件和服务，但它对路由、控制器和路由模板的工作方式相同。通过 Ember Addon 共享提供路由的唯一棘手部分是注册它们。

有两种解决方案可以注册 Ember 插件提供的路由：

1. 从 Ember 插件中导出一个方法，使用应用程序应该使用该方法来注册路由器中的路由。
2. 在插件提供的实例初始化器中导入应用程序路由器，并在其上注册路由。

第一种方法如下所示：

// in addon: /addon/index.js
export function registerRoutes(router) {
router.map(function () {
this.route('foo');
});
}

// in consuming application: /app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { registerRoutes } from 'my-addon';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
// application routes are registered as usual
});
// register routes provided by addon
registerRoutes(Router);
export default Router;

第二种方法稍微复杂一些，但不需要对使用应用程序进行任何更改。您可能会将其视为应该避免的优势或令人困惑的魔法。

// in addon: /app/instance-initaliziers/my-addon.js
// as this is merged with application's app tree, we can import files from application
import ApplicationRouter from '../router';
export function initialize() {
// register as you would do in app/router.js
ApplicationRouter.map(function() {
this.route('foo');
});
}
export default {
initialize
};