浅谈前端路由的概念

1.Web路由

1.1 后端路由

Web路由的概念简单来说就是根据不同URL渲染不同的页面。在前后端不分离的时代，路由往往指的是后端路由（服务端路由），即当服务端接收到客户端发来的 HTTP 请求，就会根据所请求的相应 URL，进行文件读取，数据库读取等操作，使用模板引擎将相应结果与模板结合后进行渲染，将渲染完毕的页面发送给客户端。

优缺点

优点：seo友好，爬虫爬取到的页面就是最终的渲染页面。

缺点：每次发起请求都要刷新页面，用户体验不好，服务器压力大。

1.2 前端路由

说到前端路由，必须先提一下Ajax与SPA。Ajax技术的兴起促使了 SPA—单页面应用的出现，由于Ajax可以做到页面的局部更新，因此单页应用页面的交互和页面的跳转都是无刷新的，无刷新就意味着无需处理html文件的请求，因此用户体验很好。但相应的，由于页面数据需要通过Ajax获取，因此爬虫获取到的html只是模板而不是最终的渲染页面，因此会不利于seo。为了实现单页应用，所以就有了前端路由。

前端路由的概念简单来讲就是，当路由发生变化，不请求服务端，而是通过js的方式修改dom（组件替换），并发送Ajax获取数据来达到页面跳转的效果。因此实现前端路由有两个关键点：

如何改变url不让浏览器向服务器发送请求。

如何监听到url的变化，并执行对应的操作

这里就要引出实现前端路由的两种路由模式：hash模式和history模式

2.前端路由的实现模式

2.1 hash模式

概念：hash 就是指 url 后的 # 号以及后面的内容

特点：hash模式有以下几个特点

hash值的变化不会导致浏览器向服务器发送请求，不会引起页面刷新。

hash值变化会触发hashchange事件。

hash值改变会在浏览器的历史中留下记录，使用浏览器的后退按钮，就可以回到上一个hash值。

hash永远不会提交到服务端，即使刷新页面也不会。

由此可见hash模式的特点完全可以满足前端路由的实现需求，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

优缺点

优点:

1、兼容性好，支持低版本和IE浏览器。

2、实现前端路由无需服务端的支持。

缺点:

URL带#，路径丑

2.2 history模式

概念：在 HTML5 之前，浏览器就已经有了 history 对象来控制页面历史记录跳转，主要有以下方法。

history.forward()：前进

history.back()：后退

history.go(n)：加载历史列表中的某个具体的页面

在 HTML5 的规范中，history 新增了以下几个 API：pushState（追加） 和 replaceState（替换），通过这两个 API 可以改变 url 地址且不会发送请求，同时还新增popstate 事件。通过这些API就能用另一种方式来实现前端路由，其实现原理跟与hash模式 实现类似，只是用了 HTML5 的实现，单页面应用的 url 不会多出一个#，会更加美观。

关于History模式有两点需要说明：

history模式如何监听路由变化

history模式下，浏览器的前进后退（history.back(), history.forward()等）会触发popstate 事件，但pushState，replaceState 并不会触发popstate事件。因此要实现路由变化的侦听，我们需要重写这两个方法，可以通过事件中心（EventBus）添加事件通知。

history模式需要后端支持

由于history模式没有 # 号，所以当用户手动刷新或直接通过url进入应用时，浏览器还是会给服务器发送请求。但服务端无法识别这个 url ，因此为了避免出现这种情况，history模式需要服务端的支持，即服务端需要把匹配不到的所有路由都重定向到根页面。

优缺点

优点：

路径好看

缺点：

1、兼容性差，不能兼容IE9。

2、需要服务端支持。