Ember 路由定义

由 ubuntu的疯狂 创建， 最后一次修改 2017-01-06 当你的应用启动的时候，路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。1，基本路由在app/router.js的map方法里定义的路由会映射到当前的URL。当map方法被调用的时候方法体内的route方法就会创建路由。下面使用Ember CLI命令创建两个路由：ember generate route aboutember generate route favorites命令执行完之后你可在你的项目目录app/routes下面看到已经创建好的两个路由文件已经app/templates下面路由对应的模板文件。此时在app/router.js的map方法中已经存在了刚刚创建的路由配置。这个是Ember CLI自动为你创建了。// app/router.jsimport 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模板！<br>{{outlet}}这个是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，增加一个导航菜单。 <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><div class="container-fluid" style="margin-top: 70px;">{{outlet}}</div>如果看到页面没有bootstrap效果请重新启动项目。如果运行项目后再浏览器控制台出现如下错误。如果出现上图错误需要在config/environment.js中加上一些安全策略设置代码，有关设置的解释请看下面网址的文章介绍。ember-cli-and-content-security-policy-cshttps://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"}上图是我的演示项目配置。然后点击about会得到如下界面可以看到浏览器地址栏的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的路由。比如下面的两种路由设置是等价的。// app/router.js// ……Router.map(function() { this.route('about'); // 注意：访问的URL可以写favs但是项目中如果是使用route的地方