路由定义

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

基本路由

在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下面的两个模板文件如下：

这个是about模板！
{{outlet}}

这个是favorites模板！
{{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，增加一个导航菜单。

<div class="container-fluid">
        <div class="navbar-header" href="#">

            {{#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>

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

run result

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

ember-cli-and-content-security-policy-cs https://www.w3.org/TR/2015/CR-CSP2-20150721/ , 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" }


浏览器地址栏的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）。 上述演示的就是路由的切换！！！

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

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

## 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'); });

});

export default Router;

两种设置方式都会得到如下图的路由表。

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

当用户访问/posts时实际进入的路由是posts.index对应的模板是posts/index.hbs，
但是实际中并没有创建这个模板，因为Ember默认把这个模板渲染到posts.hbs的{{outlet}}上。

由于这个模板不存在也就相当于什么都没做。当然你也可以创建这个模板。

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

这里是/posts/index.hbs。。。

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

对于每一个有子路由的路由都有一个名为index的子路由并且这个路由对应的模板为index.hbs，
如果把有子路由的路由当做一个模块看待那么index.hbs就是这个模块的首页。

## 动态段
关于动态段在前面的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;


## 通配符/全局路由
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这个路由。因为可以匹配到这个路由。

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

this.route('posts', function() { this.route('post', { path: '/:post_id'}); this.route('comments', { resetNamespace: true}, function() { this.route('new'); }); }); ```

路由定义

路由定义

基本路由

这里是/posts/index.hbs。。。

选择支付方式：