单页应用

为了你能看懂这篇博客之后的所有内容，你必须知道什么是单页应用。

简单的讲，链接跳转时界面不会刷新应用就是单页应用。它的特点是，用户在浏览或者点击跳转的时候感觉不到界面的跳转过程，因为无需等待，所以能极大的提高用户的体验。

它的发展大致可以分为三个阶段。

第一阶段：没有ajax的时代

这个时间段，单页应用还没普及，网站大多采用传统的服务端渲染。每一个url、每一个表单提交，服务端都会返回一个完整的HTML文件。对于前端来说，可以做的事情无非就是布局、兼容、切片等工作。这个阶段如果想要模拟无刷新的体验，人们往往会使用frame标签将页面进行分割，每个部分都是一个HTML文件。这种方式缺点很明显：没办法回退；多个HTML页面的通信很复杂；对SEO不友好；分割页面的计算方式很复杂等等。优点也有一些，比如，各个HTML页面之间相互独立，代码之间的耦合度不大。

第二阶段：ajax的出现+location.hash

这个阶段的单页应用已经初现原型了。这个阶段也是前端各种mv*框架层出不穷的阶段，也是富应用客户端炒得最火的时候，各种MVC、MVVM框架开始流行，而服务端大多向restful方向靠拢了。JavaScript可以通过ajax发送request，可以监听url中`#`号部分的变化，这已经足够完成一个单页应用了。更有甚者，不需要hash，类似于一个tab切换，直接在浏览器内存中保存跳转记录也是可以的。这种做法的优点很明显，不需要分割页面，不需要用多个HTML，也支持回退等。缺点还是SEO的问题，因为只能监听和更改url中`#`号之后的内容，所以整个应用对于后台或者搜索引擎来说，只有一个链接。这种做法，时至今日，采用的人数还是比较多的，大多是一些对SEO要求不高的应用。因为从现在的眼光来看，这种做法的兼容性是最高的。

第三阶段：HTML5 history API的出现

这个阶段，由于HTML5的出现，各大浏览器也开始支持history API了，前端程序员可以完全的控制浏览器的URL了，所以各大MVC，MVVM框架也都支持通过history API来实现路由系统了，还支持优雅降级了。这种模式可以配合服务端将URL完全交由前端管理，这也是前端路由系统发展的主流方向。至此，单页应用的路由系统也才相对完善，只是这个API对于低版本的浏览器支持程度相对较低，一般的框架都会提供多种路由模式供使用者选择。不过，时代在发展，低版本浏览器早晚会被淘汰。

单页应用的路由系统

随着单页应用的流行，前端对于URL的管理也开始重视起来了。单页应用的路由系统，实质就是一个管理各种URL的管理器。每个URL对应一个HTML片段，或者交由一个controller/组件进行管理，跳转路由之后将HTML片段渲染至指定位置。接下来，我们看看现在两个主流框架的实现方法。

vue-router

vue中的router模块是跟vue的组件强相关的，每个route都对应一个组件进行管理，组件内容无非就是些UI操作上的内容。如下是vue-router官网的一个实例：

const router = new VueRouter({

routes: [

{ path: '/user/:id', component: User,

children: [

{          // 当 /user/:id/posts 匹配成功

// UserPosts 会被渲染在 User 的  中

path: 'posts',

component: UserPosts

}

]

}

]

})

component字段指定路由对应的渲染组件，没到匹配到相应的路由的时候，都会使用该组件将router-view组件的内容进行替换。另外，它支持三种路由模式：hash、history、abstract。若没有指定，模式采用的hash模式。更多的配置项可以参看vue-router中文官网。

react-router

react的router跟vue的大同小异，只不过它将router模块改写成了组件，引入router之后，只需要像操作组件那样操作router就行了。比如：

React.render((

), document.body)

上面代码的意思很明显，document.body为渲染区域，各个路径对应一个组件，匹配到路径之后就用对应组件渲染document.body。它支持的路由模式有：browserHistory、hashHistory、createMemoryHistory。具体使用还是建议大家参看react-router中文文档。

结语

经过上面这些讲解，我相信大多数人应该知道了什么是单页应用，为何需要路由系统，以及各种路由系统的之间的优劣好坏。如果在路由系统的选择和使用上，大家心里更有把握了，那么这篇文章就值得了！所有的这些，都是为下篇文章《前端单页应用的路由系统–实现篇》做的一个铺垫。

在撰写这篇文章之前，我已经简单的实现了两种路由模式。有兴趣的朋友可以提前参看我的GitHub：https://github.com/lizhiqianduan/single-page-app-router。后面几篇文章，我主要会讲解hash模式以及history模式的路由系统简单的实现方法，敬请期待！

打赏作者

xiaohei

微信支付

支付宝