當你的應用啓動的時候，路由器就會匹配當前的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的層次，對你調試代碼還是很有幫助的。
以上的內容就是定義路由的全部內容。都是非常重要的知識，希望你能好好掌握，對於路由的嵌套請看之前的文章。如果有疑問請給我留言或者訪問官網看原教程。
