EmberJS - 定义路由
路由器将当前 URL 与负责显示模板、加载数据和设置应用程序状态的路由进行匹配。路由器 map() 方法用于定义 URL 映射，该映射传递一个以参数为对象的函数来创建路由。 {{ link-to }}}i> 帮助程序用于导航路由器。
要定义路由，请在项目文件夹中使用以下命令 −
ember generate route route-name
它会创建路由文件 app/routes/name_of_the_route.js、路由模板 app/templates/name_of_the_route.hbs 以及单元测试文件 tests/unit/routes/route_name_of_the_test.js。
您可以使用路由器的 map() 方法定义 URL 映射。可以使用 this 值调用该方法来创建用于定义路由的对象。
Router.map(function() {
this.route('link-page', { path: '/path-to-link-page' });
.
.
this.route('link-page', { path: '/path-to-link-page' });
});
以上代码显示了如何使用路由器图链接不同的页面。它以 linkpage 名称和路径作为参数。
下表显示了不同类型的路由 −
| S.No. | 路由 &描述 |
|---|---|
| 1 | 嵌套路由
通过在另一个模板内定义模板来指定嵌套路由。 |
| 2 | 动态段
它以 route() 方法中的 : 开头，后跟标识符。 |
| 3 | 通配符/通配符路由
通配符路由用于匹配多个 URL 段。 |
示例
以下示例显示如何定义显示数据的路由。打开在 app/templates/ 下创建的 .hbs 文件。在这里，我们使用以下代码将文件创建为 routedemo.hbs −
<h2>My Books</h2> <ul> <li>Java</li> <li>jQuery</li> <li>JavaScript</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('routedemo');
});
export default Router;
创建 application.hbs 文件并添加以下代码 −
//link-to 是用于创建链接的把手助手
{{#link-to 'routedemo'}}BookDetails{{/link-to}}
{{outlet}} //It is a general helper, where content from other pages will
appear inside this section
输出
运行 ember 服务器，您将收到以下输出 −
点击输出的链接，会生成如下图所示的结果 −
emberjs_router.html
