从浏览器跳转到前端框架的路由实现

还记得jquery时代吗，那时前端三大框架还没流行，前端开发者疯狂查着jquery的API文档来进行dom操作，还记得这个地址吗 jquery.cuishifeng.cn/ 是不是很有感觉！（想了解前端历史的，请看我这篇文章前端技术发展 juejin.im/post/5cc6b5…

记得在学校里刚开始写网页的时候，只是对JavaScript学了个大概，然后就开始学jquery进行网页开发了。

如果你曾经也是jquery开发者，看到这块代码时，杯中的水开始颤抖，啊！我的青春啊！

那时毕业后的大半年写前端就只用了 jquery ，没有现在这些前端框架提供的工程化，模块化，组件化（其实有，但我还没学没用，而且我进的第一个公司那时我是公司的第一个前端，没有前辈的教导，自己摸索）。写前端就用了js（jquery），css，html，来进行项目的工程文件目录结构搭建。想想那段日子可真累啊！
引子

那时写网页时遇到个需求：

假设一个页面左侧是若干导航链接，右侧是内容，同时导航时只有右侧的内容需要更新，那么刷新整个页面无疑是浪费的（原本每个导航链接都是a标签href跳转网页）。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。

这时，查到 HTML5 的 History API 就可以解决这个问题。

思路：

首先绑定click事件。当用户点击一个链接时，通过preventDefault函数防止默认的行为（页面跳转），同时读取链接的地址（如果有jQuery，可以写成 ( t h i s ) . a t t r ( ′ h r e f ′ ) ） ， 把 这 个 地 址 通 过 p u s h S t a t e 塞