Ember.js 入门指南——路由简介

从本文开始，将为大家介绍路由（route），如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次，更深入的route将从本文开始逐一介绍。

       当用户使用你的应用时，应用要在不同的状态之间切换。Ember提供了很多工具用于管理那些因应用规模改变而改变的状态。

       讲route前先了解URL，在应用中大概会会有如下方式设置URL：

• 用户第一次加载应用的时；
• 用户手动改变URL，比如点击按钮之后跳转到另一个页面或者是直接修改浏览器地址了的URL；
• 用户点击应用的链接；
• 其他导致URL改变的事件；

 

不管URL怎么改变，在Ember应用中，每个当前的URL都会映射到一个或者多个路由器上。每个路由都可以处理下面列出的事情：

• 路由可以渲染一个对应的模板；
• 路由可以加载model并渲染到对应的模板上；
• 路由可以重定向到另一个路由，比如用户无权访问某个页面时重定向到403页面；
• 路由可以处理action动作；

 

提醒：本系列入门指南文章都是基于官网V2.0文档改编而来的。所涉及的版本信息如下表：

Ember inspector	1.9.1
Ember	1.13.7
Ember date	1.13.8
jquery	1.11.3

       文章中演示的代码都可以从github上获取。文章同步发表在oschina、ibeginner、csdn。

       项目的搭建使用Ember CLI，执行Ember CLI需要node.js和npm，请自行安装。

搭建项目框架

       有关于路由的演示代码全部放在现在搭建的项目中。下面使用Ember CLI命令搭建一个Ember项目：

       embernew chapter3_routes

       cdchapter3_routes

       emberserver

在浏览器运行：http://localhost:4200/，在界面上能看到“Welcome to Ember”说明项目搭建成功了！！