设置嵌套路由

嵌套路由用于应用程序的管理端，以加载不同的分类。首先，让我们讨论一下通过嵌套路由希望实现的目标。

需求

管理页面

查看下方的原型设计，了解 admin 路由的整体结构：

我们的管理页面包含以下两个部分：

• 一部分用于展示所有商品，用户可点击进行编辑。
• 另一部分用于加载“添加”或“编辑”页面。当用户点击“添加”按钮时，add 路由会加载一个商品表单；当用户点击某个商品标题时，edit 路由会加载对应商品的编辑页面，显示该特定商品的信息。

接下来，我们来生成嵌套路由。

分类页面

我们希望将分类作为独立的路由。例如，当用户访问某个分类时，URL 应为 http://localhost:4200/category/<分类名称>。当用户点击某个商品时，应打开一个显示商品详情的页面，我们称之为 item 路由。每个商品都有唯一的商品 ID，因此其 URL 应为 http://localhost:4200/category/Men/item/<id>。为此，我们需要在 category 路由中创建一个 item 路由。

生成嵌套路由

admin 路由

运行以下命令，在 admin 路由中生成嵌套路由：

1$ ember g route admin/add

1$ ember g route admin/edit

这些命令会在 app/routes 路径下生成一个名为 admin 的目录。嵌套路由将被创建在 app/routes/admin 路径中。

category 路由

运行以下命令，在 category 路由中创建 item 路由：

1$ ember g route category/item

执行该命令后，将在 app/routes/category 路径下创建一个 item 路由。

在添加嵌套路由后，我们来看一下 router.js 文件的内容：

1import EmberRouter from '@ember/routing/router';
2import config from 'e-commerce-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('admin', function () {
11    this.route('add');
12    this.route('edit');
13  });
14  this.route('cart');
15  this.route('category', function () {
16    this.route('item');
17  });
18  this.route('not-found', { path: '/*' });
19});

admin 路由结构

我们为管理页面搭建一个基本结构，并学习如何设置嵌套路由，使其在同一页面上正确渲染。我们将使用 Bootstrap 的网格系统来划分管理页面布局：将页面的 12 列中的 8 列分配给商品列表，剩余的 4 列用于 add 和 edit 路由。以下是 admin.hbs 文件的具体内容：

1{{!-- app/templates/admin.hbs --}}
2
3{{page-title "Admin"}}
4<br>
5
6  {{!-- 创建商品操作区域 --}}
7<div class="row">
8	
9  <div class="col-4 add_edit">
10        <LinkTo class='btn btn-success' @route="admin.add" >添加商品</LinkTo>
11        <LinkTo class='btn btn-success' @route="admin.edit" >编辑</LinkTo>
12		<hr>
13		{{outlet}}  
14  </div>
15  {{!-- 商品列表区域 --}}
16	<div class="col-8 products">
17        <h4>商品列表</h4>
18	
19  </div>
20</div>

• 第 9 行：为 add 和 edit 路由创建一个占 4 列的 div 区域。
• 第 10–11 行：将 admin 路由链接到 add 和 edit 路由。通过添加 Bootstrap 的 btn btn-success 类，使 <LinkTo> 元素呈现为按钮样式。
• 第 13 行：使用 {{outlet}} 指定 add 或 edit 路由的渲染位置。
• 第 17 行：为商品列表创建一个占 8 列的 div 区域。

我们为所有 div 标签添加边框，以清晰区分各个列和路由区域。最终效果如下所示：

运行以下应用，并访问 admin 路由以测试嵌套路由功能：