前端单页应用的路由系统 – 介绍篇

单页应用

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

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

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

第一阶段:没有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 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

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

react-router

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

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
    </Route>
  </Router>), document.body)

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

结语

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

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



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注