引子

曾经用过微信的weui，感觉很不错的样子，用于微信开发很有帮助。看了下它的官网，发现当我在不同页面间进行跳转的时候，仅仅是url发生变化，而所有源码都是在同一个页面，这应该就是spa应用了。

当初因为不太懂，自己做页面的时候通过js结合css来实现了类似这种效果，发现勉强够用，但是不足的地方也很明显。在css还未生效的时候会出现其他部分的内容，这样就不好了。

前几天偶然间发现前端路由这个概念，一路顺着缕了一下相关知识，发现还是自己会的东西不够，这个东西是spa应用早就在用的了。

概念

没有找到官方的概念，只有一些网友牛人总结出来的：

根据不同的URL地址来显示不同的内容或页面，一般由后端来实现。随着SPA（单页面应用）的广泛使用，这个工作交由前端来实现。

使用

• 当用户在点击链接的时候，页面通过ajax加载内容，为了实现后退操作，使用前端路由在URL后面添加hash，然后通过触发hashchange来实现

• 在SPA应用中，所有的HTML都在一个文件中，通过前端路由来实现不同页面切换效果，同样通过hash来进行操作

插件

推荐几个比较好的，用的人比较多路由插件：

• page.js

[英文] 这个好像国内用的人比较少

• Q.js

[中文] 原生js实现的超级轻量级的插件，功能也较为简单

• director

[英文] 这个也是国外的插件，很好很强大

• vipspa

[中文] 依赖zepto或者jQuery的一个微型spa框架

• spa-routers JS原生一步步实现前端路由和单页面应用

[中文] 作者详细的介绍了实现的原理和代码，值得学习