EmberJS - 路由器嵌套路由

您可以通过将回调传递给当前路由，在另一个模板中定义一个模板来定义嵌套路由。

语法

Router.map(function() {
   this.route('link-page', { path: 'pathTolinkpag' }, function() {
      this.route('link-page');
   });
});

要创建嵌套路由，请运行以下命令 −

ember generate route route_name/another_route_name

示例

以下示例显示如何定义嵌套路由以在一个模板内显示另一个模板。打开在 app/templates/nestedroute 下创建的文件 .hbs。在这里，我们使用以下代码将文件创建为 fruits.hbs −

<h2>Fruits Page</h2>
<ul>
   <li>Orange</li>
   <li>Apple</li>
   <li>Banana</li>
</ul>

打开 router.js 文件来定义 URL 映射 −

import Ember from 'ember';
//以变量 Ember 的形式访问 Ember.js 库
import config from './config/environment';
//它以变量 config 的形式提供对应用程序配置数据的访问

//const 声明只读变量
const Router = Ember.Router.extend ({
    location: config.locationType,
    rootURL: config.rootURL
});

//定义以参数为对象来创建路由的 URL 映射
Router.map(function() {
   this.route('nestedroute', function() {
      this.route('fruits');
   });
});

//它指定可供应用程序其他部分使用的路由器变量
导出默认路由器；

创建 application.hbs 文件并添加以下代码 −

{{#link-to 'nestedroute.fruits'}}fruits{{/link-to}}
{{outlet}}

输出

运行 ember 服务器，您将收到以下输出 −

当您点击输出上的链接时，您将看到 URL 路由为 nestedroute/fruits，它将显示来自 fruits.hbs 的结果 −

emberjs_router.html