当你的应用启动的时候，路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。

1，基本路由

在app/router.js的map方法里定义的路由会映射到当前的URL。当map方法被调用的时候方法体内的route方法就会创建路由。

下面使用Ember CLI命令创建两个路由：

1
2
ember generate route about
ember generate route favorites

命令执行完之后你可在你的项目目录app/routes下面看到已经创建好的两个路由文件已经app/templates下面路由对应的模板文件。
此时在app/router.js的map方法中已经存在了刚刚创建的路由配置。这个是Ember CLI自动为你创建了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// app/router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
  this.route('favorites');
});

export default Router;

现在分别修改app/templates下面的两个模板文件如下：

1
2
3
4
<!-- app/templates/about.hbs -->

这个是about模板！<br>
{{outlet}}
1
2
3
4
<!-- app/templates/favorites.hbs -->

这个是favorites模板！<br>
{{outlet}}

然后访问http://localhost:4200/about或者http://localhost:4200/favorites，如果你的程序没有问题你也会得到如下显示结果：

run result

如果你觉得favorites这个路由名字太长是否可以修改成其他名字呢？答案是肯定的，你只要修改router.js中map方法的配置即可。

1
2
3
4
5
Router.map(function() {
  this.route('about');
  // 注意：访问的URL可以写favs但是项目中如果是使用route的地方仍然是使用favorites
  this.route('favorites', { path: '/favs' });
});

此时访问：http://localhost:4200/favs，界面显示的结果与之前是一样的。

说明：默认情况下访问的URL与路由名字是一致的，比如this.route('about')与this.route('about', { path: ‘/about’ })是同一个路由，如果URL与路由不同名则需要使用{path: '/xxx'}设置映射的URL。

在handlebars模板中可以使用{{link-to}}助手在不同的路由间切换，使用时需要在link-to助手内指定路由名称。比如下面的代码使用link-to助手实现在about和favs两个路由间切换。
为了页面能美观一点引入bootstrap，使用npm命令安装：bower install bootstrap，如果安装成功你可以在bower_components目录下看到bootstrap相关的文件。安装成功之后引入到项目中，修改chapter3_routes/ember-cli-build.js。在return语句前加入如下两行代码(作用就是引入bootstrap框架)：

1
2
app.import("bower_components/bootstrap/dist/css/bootstrap.css");
app.import("bower_components/bootstrap/dist/js/bootstrap.js");

修改application.hbs，增加一个导航菜单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- //app/templates/application.hbs -->

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
            <div class="navbar-header" href="#">
                <!--  <a class="navbar-brand" href="#">Blog</a> -->
                {{#link-to 'index' class="navbar-brand"}}Home{{/link-to}}
            </div>
            <ul class="nav navbar-nav">
                <li>{{#link-to 'about'}}about{{/link-to}}</li>
            <li>{{#link-to 'favorites'}}favorites{{/link-to}}</li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
    </div>
</nav>

<div class="container-fluid" style="margin-top: 70px;">
<!-- 项目中其他所有的模板都是application的子模板，所以其他模板都会渲染到这里的 outlet上 -->
{{outlet}}
</div>

如果看到页面没有bootstrap效果请重新启动项目。如果运行项目后再浏览器控制台出现如下错误。

run result

如果出现上图错误需要在config/environment.js中加上一些安全策略设置代码，有关设置的解释请看下面网址的文章介绍。

  1. ember-cli-and-content-security-policy-cs
  2. https://www.w3.org/TR/2015/CR-CSP2-20150721/
1
2
3
4
5
6
7
8
9
, contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval' use.typekit.net connect.facebook.net maps.googleapis.com maps.gstatic.com",
      'font-src': "'self' data: use.typekit.net",
      'connect-src': "'self'",
      'img-src': "'self' www.facebook.com p.typekit.net",
      'style-src': "'self' 'unsafe-inline' use.typekit.net",
      'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com"
    }

配置截图

上图是我的演示项目配置。然后点击about会得到如下界面

result

可以看到浏览器地址栏的URL变为about了，并且页面显示的内容也是about模板的内容。同理你点击favorites地址栏就变为http://localhost:4200/favs并且显示的内容是favorites的（为什么URL是favs而不是favorites呢，因为前面已经修改了route和URL的映射关系，路由favorites对应的URL是favs）。
上述演示的就是路由的切换！！！

可以看到浏览器地址栏的URL变为about了，并且页面显示的内容也是about模板的内容。同理你点击“favorites”地址栏就变为http://localhost:4200/favs并且显示的内容是favorites的（为什么URL是favs而不是favorites呢，因为前面已经修改了route和URL的映射关系，路由favorites对应的URL是favs）。
上述演示的就是路由的切换！！！

2，路由嵌套

还记得在前面的Ember.js 入门指南之十三{{link-to}} 助手这篇文章的内容吗？在这篇文章中比较详细的介绍了路由的嵌套与怎么使用嵌套的路由。不妨回过头去看看。在这里打算就不讲了⋯⋯如果有不明白的请看官网的教程。

3，application路由

application路由是默认的路由，是程序的入口，所有其他自定义的路由都先进过application才到自定义的路由。并且application路由对应的application.hbs模板是所有自定义模板的父模板，所有自定义的模板都会渲染到application.hbs模板的{{outlet}}上。有关于路由的执行顺序以及模板的渲染顺序在前面的Ember.js 入门指南之十三{{link-to}} 助手也讲过了，在此也不打算在做过多的介绍了。你可以回头看之前的文章或者到官网查看。

4，index路由

对于所有的嵌套的路由，包括最顶层的路由Ember会自动生成一个访问URL为/对应路由名称为index的路由。

比如下面的两种路由设置是等价的。

1
2
3
4
5
6
7
8
9
10
//  app/router.js
// ⋯⋯

Router.map(function() {
    this.route('about');
    // 注意：访问的URL可以写favs但是项目中如果是使用route的地方仍然是使用favorites
    this.route('favorites', { path: '/favs' });
});

export default Router;
1
2
3
4
5
6
7
8
9
10
11
//  app/router.js
// ⋯⋯

Router.map(function() {
  this.route('index', { path: '/' });
    this.route('about');
    // 注意：访问的URL可以写favs但是项目中如果是使用route的地方仍然是使用favorites
    this.route('favorites', { path: '/favs' });
});

export default Router;

index路由会渲染到application.hbs模板的{{outlet}}上。这个是Ember默认设置。当用户访问/about时Ember会把index模板替换为about模板。

对于路由嵌套的情况也是如此。

1
2
3
4
5
6
7
8
9
10
11
//  app/router.js
//  ⋯⋯
Router.map(function() {

    this.route('posts', function() {
      this.route('new');
    });

});

export default Router;
1
2
3
4
5
6
7
8
9
10
11
12
13
//  app/router.js

//  ⋯⋯
Router.map(function() {
  this.route('index', { path: '/' });
    this.route('posts', function() {
      this.route('index', { path: '/' });
      this.route('new');
    });

});

export default Router;

两种设置方式都会得到如下图的路由表。打开浏览器的“开发者工具”点开“Ember”选项卡，在点开“/#Routes”你就可以看到如下路由表（显示是顺序有可能跟你的不一样）。

路由渲染结果

注：loading和error这两个路由是ember自动生成的，他们的用法会在后面的文章介绍。

当用户访问/posts时实际进入的路由是posts.index对应的模板是posts/index.hbs，但是实际中我并没有创建这个模板，因为Ember默认把这个模板渲染到posts.hbs的{{outlet}}上。由于这个模板不存在也就相当于什么都没做。当然你也可以创建这个模板。

使用命令：ember generate template posts/index然后在这个模板中添加以下显示的内容：

1
2
3
<!-- app/templates/posts/index.hbs  -->

<h2>这里是/posts/index.hbs。。。</h2>

再此访问http://localhost:4200/posts，是不是可以看到增加的内容了。

你可以这么理解对于每一个有子路由的路由都有一个名为index的子路由并且这个路由对应的模板为index.hbs，如果把有子路由的路由当做一个模块看待那么index.hbs就是这个模块的首页。特别是做过一些信息系统的朋友应该是很熟悉的，基本上没个子模块都会有一个首页，这个首页现实的内容就是一进入这个模块时就显示的内容。既然是子模板当然也不会例外它也会渲染到父模板的{{outlet}}上。比如上面的例子当用户访问http://localhost:4200/posts实际进入的是http://localhost:4200/posts/（后面多了一个/，这个/对应的模板就是index），当用户访问的是http://localhost:4200/posts/new，那么进入的就是posts/new.hbs这个模板（也是渲染到posts.hbs的{{outlet}}上）。

4，动态段

关于动态段在前面的Ember.js 入门指南之十三{{link-to}} 助手也介绍过了，在这里就再简单补充下。

路由最主要的任务之一就是加载model。

例如对于路由this.route('posts');会加载项目中所有的posts下的model。但是当你只想加载其中一个model的时候怎么处理呢？而且大多数情况我们是不需要一次性加载完全部数据的，一般情况都是加载其中一小部分。这个时候就需要动态段了！

动态段以:开头，并且后面接着model的id属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//  app/router.js

//  ⋯⋯

Router.map(function() {
    this.route('about');
    // 注意：访问的URL可以写favs但是项目中如果是使用route的地方仍然是使用favorites
    // this.route('favorites', { path: '/favs' });

    this.route('posts', function() {
      this.route('post', { path: '/:post_id'});
    });
    
});

export default Router;

此时你可以访问http://localhost:4200/posts/1，不过我们还没创建model所以会报错。这个我们暂时不管，后面会有一章是介绍model的。现在只要知道你访问http://localhost:4200/posts/1就相当于获取id值唯一的model。

5，通配符/全局路由

Ember也同样运行你使用*作为URL通配符。有了通配符你可以设置多个URL访问同一个路由。

1
this.route('about', { path: '/*wildcard' });

然后访问：http://localhost:4200/wildcard或者访问http://localhost:4200/2423432ffasdfewildcard或者http://localhost:4200/2333都是可以进入到about这个路由，但是http://localhost:4200/posts仍然进入的是posts这个路由。因为可以匹配到这个路由。

6，重置子路由的命名空间

在有路由嵌套的情况下，一般情况我们访问URL的格式都是父路由名/子路由名，Ember提供了一个resetNamespace:true选项可以用户重置子路由的命名空间，使用这个设置的路由可以直接这样访问/子路由名，不需要写父路由名。

1
2
3
4
5
6
this.route('posts', function() {
    this.route('post', { path: '/:post_id'});
    this.route('comments', { resetNamespace: true}, function() {
      this.route('new');
    });
});

此时如果你想问的new这个路由你可以直接不写comments。http://localhost:4200/posts/new，而不需要http://localhost:4200/posts/comments/new，不过模板渲染的顺序没变，new模板仍然是渲染到comments的{{outlet}}上。

不过个人觉得还是不使用这个设置比较好，特别是在开发的时候你可以看到访问的URL的层次，对你调试代码还是很有帮助的。

以上的内容就是定义路由的全部内容。都是非常重要的知识，希望你能好好掌握，对于路由的嵌套请看之前的文章。如果有疑问请给我留言或者访问官网看原教程。


博文完整代码放在Github（博文经过多次修改，博文上的代码与github代码可能又出入，不过影响不大！），如果你觉得博文对你有点用，请在github项目上给我点个star吧。您的肯定对我来说是最大的动力！！