路由简介

路由是任何Web应用开发框架中的核心组成部分。路由提供了一种便捷的方式，用于在应用程序的不同阶段之间进行导航。Ember拥有一个功能强大的路由器，具备丰富的特性。我们在 app 目录下有一个 router.js 文件，该文件定义了应用程序的站点地图。router.js 文件负责将所有路由映射到浏览器中。下面我们来看看如何生成路由。

在 Ember 中创建路由

在 Ember 应用中创建路由有两种方式：手动创建或使用 Ember CLI 命令。

手动创建路由

首先我们来讨论手动创建路由的方法。假设我们要在电商应用中创建一个 cart 路由，需要执行以下步骤：

• 在 app/routes 目录下创建一个名为 cart.js 的文件。
• 在 app/templates 目录下创建一个名为 cart.hbs 的模板文件。

注意：路由名称（cart.js）和模板名称（cart.hbs）必须一致。这使得 Ember 路由器能够正确匹配模板与路由。

我们的路由已经准备就绪。但还需要在应用中指定：当用户请求 cart 路由时，加载 cart.js 和 cart.hbs 文件。为此，我们需要在 app 目录下的 router.js 文件中注册该路由。具体做法是在 router.js 文件的 map() 方法中添加我们的路由。

以下是向 router.js 添加 cart 路由的代码示例：

1import EmberRouter from '@ember/routing/router';
2import config from 'ecommerce-app/config/environment';
3
4export default class Router extends EmberRouter {
5  location = config.locationType;
6  rootURL = config.rootURL;
7}
8
9Router.map(function () {
10  this.route('cart');
11});

在第10行中，我们在 map() 方法中定义了 cart 路由。当用户请求 cart 路由时，router.js 将负责在浏览器中映射该路由。

我们还可以为路由指定不同于名称的路径。例如，我们想创建一个 about 路由，但希望 URL 显示为 about-us 而不是 about。可以通过在 map() 方法中指定路径来实现，如下所示：

1import EmberRouter from '@ember/routing/router';
2import config from 'ecommerce-app/config/environment';
3
4export default class Router extends EmberRouter {
5  location = config.locationType;
6  rootURL = config.rootURL;
7}
8
9Router.map(function () {
10  this.route('cart');
11  this.route('about', { path: '/about-us' });
12});

在第11行中，about 路由将可通过 URL http://localhost:4200/about-us 访问。而 cart 路由未指定路径，因此其默认路径等同于：

1this.route('cart', { path: '/cart' });

如果希望路径与路由名称相同，可以省略 path 参数。

使用 Ember CLI 创建路由

Ember CLI 提供了多种便捷功能以节省时间。要使用 Ember CLI 创建 cart 路由，只需运行以下命令：

1$ ember generate route cart
2或
3$ ember g route cart

注意：$ ember g 是 $ ember generate 的简写形式。

执行上述命令后，Ember CLI 会在 app/routes 目录下生成 cart.js 文件，在 app/templates 目录下生成 cart.hbs 文件，并自动在 router.js 文件的 map() 方法中注册 cart 路由。此外，该命令还会在 tests/unit/routes 目录下生成一个单元测试文件。

路由类型

Ember 中共有六种路由类型，下面我们逐一介绍。

基础路由

基础路由是单一的路由。例如，cart 路由就是一个基础路由。

嵌套路由

嵌套路由是指路由内部包含其他路由。当需要在一个模板中加载另一个模板时，通常会使用嵌套路由。例如，我们正在为电商应用构建一个 admin 路由，该路由具有添加新商品的功能。我们可以将 add 路由嵌套在 admin 路由中，以实现添加商品的功能。要为现有路由添加嵌套路由，可以运行以下命令：

1$ ember g route admin/add

该命令将在 admin 路由下生成 add 路由。我们也可以通过在 router.js 文件中向 this.route 传递回调函数的方式来定义嵌套路由。以下是 router.js 中配置嵌套路由的示例：

1Router.map(function () {
2  this.route('admin', function() {
3    this.route('add');
4  });
5});

application 路由

application 路由是应用启动时默认加载的路由。与其他路由一样，它会加载同名的模板，即 application.hbs。我们通常将页头、页脚、导航栏或其他装饰性内容放在 application 路由中。所有其他路由的模板都会渲染在 application.hbs 中。

index 路由

在 Ember 应用的每一级嵌套路由中，都存在一个对应 / 路径的 index 路由。index 路由会替换路由中的 {{outlet}}。为了更好地理解这一点，可以回顾一下“模板”章节中关于主页设计的内容。我们在“模板”章节中将导航栏放入了 application.hbs，并为首页内容创建了 index.hbs 模板。此时，application 路由的 index 路由替换了 {{outlet}}。当其他路由被加载时，它们会替换掉当前的 index 路由。{{outlet}} 提供了一个位置，供其他路由进行渲染。正如前面所述，每个路由都会在 application.hbs 中渲染，从而替换其中的 {{outlet}}。以下是 Ember 为每一级嵌套结构自动生成 index 路由的示例：

1Router.map(function () {
2  this.route('index', { path: '/' });
3  this.route('admin', function() {
4    this.route('index', { path: '/' });
5    this.route('add');
6  });
7});

这等价于以下写法：

1Router.map(function () {
2  this.route('admin', function() {
3    this.route('add');
4  });
5});

上述示例中包含了两个 index 路由：一个属于 application 路由，另一个属于 admin 路由。

动态路由

动态路由用于加载动态数据。同一个路由可以根据不同的数据模型进行填充。例如，我们希望在电商应用中展示商品详情页面。每个商品的数据各不相同，URL 可能为 http://localhost:4200/products/item/<item_id>。每当 <item_id> 变化时，该路由就会加载不同的数据。

404 路由

404 路由在用户尝试访问不存在的路由时被加载。