前端路由基本原理

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 repositories available. Follow their code on GitHub.https://github.com/lizuncong

1.哈希#。借鉴a标签的锚点机制实现页内导航，Url变化后浏览器不刷新。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。

通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：

http://csdn.com/#!/first
http://csdn.com/#!/second
http://csdn.com/#!/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://csdn.com/)。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

2.HTML5中新的history API。

3.路由的核心是给应用定义“状态”

4.使用路由机制会影响到应用的整体编码方式（需要预先定义好状态）。

5.考虑兼容性问题与“优雅降级”