当你的应用启动的时候，路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。
1，基本路由
在app/router.js的map方法里定义的路由会映射到当前的URL。当map方法被调用的时候方法体内的route方法就会创建路由。
下面使用Ember CLI命令创建两个路由：
ember generate route about ember generate route favorites
命令执行完之后你可在你的项目目录app/routes下面看到已经创建好的两个路由文件已经app/templates下面路由对应的模板文件。
此时在app/router.js的map方法中已经存在了刚刚创建的路由配置。这个是Ember CLI自动为你创建了。
// 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下面的两个模板文件如下：
<!-- app/templates/about.hbs -->
这个是about模板！<br>
{{outlet}}
<!-- app/templates/favorites.hbs -->
这个是favorites模板！<br>
{{outlet}}
然后访问http://localhost:4200/about或者http://localhost:4200/favorites，如果你的程序没有问题你也会得到如下显示结果：
如果你觉得favorites这个路由名字太长是否可以修改成其他名字呢？答*案是肯定的，你只要修改router.js中map方法的配置即可。
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框架)：
app.import("bower_components/bootstrap/dist/css/bootstrap.css");
app.import("bower_components/bootstrap/dist/js/bootstrap.js");
修改application.hbs，增加一个导航菜单。
<!-- //app/templates/application.hbs -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div>
<div href="#">
<!-- <a href="#">Blog</a> -->
{{#link-to ‘index‘}}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 style="margin-top: 70px;">
<!-- 项目中其他所有的模板都是application的子模板，所以其他模板都会渲染到这里的 outlet上 -->
{{outlet}}
</div>
如果看到页面没有bootstrap效果请重新启动项目。如果运行项目后再浏览器控制台出现如下错误。
请在config/environment.js的APP后面添加如下内容：
, 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”会得到如下界面
可以看到浏览器地址栏的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”的路由。
比如下面的两种路由设置是等价的。
// app/router.js
// ……
Router.map(function() {
this.route(‘about‘);
// 注意：访问的URL可以写favs但是项目中如果是使用route的地方仍然是使用favorites
this.route(‘favorites‘, { path: ‘/favs‘ });
});
export default Router;
// 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模板。
对于路由嵌套的情况也是如此。
// app/router.js
// ……
Router.map(function() {
this.route(‘posts‘, function() {
this.route(‘new‘);
});
});
export default Router;
// app/router.js
// ……
Router.map(function() {
this.route(‘index‘, { path: ‘/‘ });
this.route(‘posts‘, function() {
this.route(‘index‘, { path: ‘/‘ });
this.route(‘new‘);
});
});
两种设置方式都会得到如下图的路由表。打开浏览器的“开发者工具”点开“Ember”选项卡，在点开“/#Routes”你就可以看到如下路由表（显示是顺序有可能跟你的不一样）。
注：loading和error这两个路由是ember自动生成的，他们的用法会在后面的文章介绍。
当用户访问“/posts”时实际进入的路由是posts.index对应的模板是posts/index.hbs，但是实际中我并没有创建这个模板，因为Ember默认把这个模板渲染到posts.hbs的{{outlet}}上。由于这个模板不存在也就相当于什么都没做。当然你也可以创建这个模板。使用命令：ember generate template posts/index然后在这个模板中添加以下显示的内容：
<!-- 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属性。
// 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访问同一个路由。
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”选项可以用户重置子路由的命名空间，使用这个设置的路由可以直接这样访问“/子路由名”，不需要写父路由名。
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的层次，对你调试代码还是很有帮助的。
以上的内容就是定义路由的全部内容。都是非常重要的知识，希望你能好好掌握，对于路由的嵌套请看之前的文章。如果有疑问请给我留言或者访问官网看原教程。