【造轮子】是笔者学习和理解一些较复杂的代码结构时的常用方法，它很慢，但是效果却胜过你读十几篇相关的文章。为已知的API方法自行编写实现，遇到自己无法复现的部分再有针对性地去查资料，最后当你再去学习官方代码的时候，就会明白这样做的价值，总有一天，你也将有能力写出大师级的代码。

一. 前端路由

现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果，归功于其前端路由机制。

前端路由，顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是对这种功能的具体实现。

既然前端路由这么牛逼，那必须的好好研究一下。

二. 两种实现方式及其原理

常见的路由插件中两种方式都是支持且可以切换的，例如angularjs1.x中就可以通过以下代码从Hash模式切换到H5模式：
$locationProvider.html5Mode(true);
切换到HTML5的路由模式，主要用于避免url地址中包含#而引发的问题。

1.HashChange

1.1 原理

HTML页面中通过锚点定位原理可进行无刷新跳转，触发后url地址中会多出# + 'XXX'的部分，同时在全局的window对象上触发hashChange事件，这样在页面锚点哈希改变为某个预设值的时候，通过代码触发对应的页面DOM改变，就可以实现基本的路由了,基于锚点哈希的路由比较直观，也是一般前端路由插件中最常用的方式。

1.2 应用

下面通过一个实例看一下,当点击angularjs的连接时，可以看到控制台打印出了相应的信息。

2.HTML5 HistoryAPI

2.1 原理

HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。

在HTML4中，已经支持window.history对象来控制页面历史记录跳转，常用的方法包括：

• history.forward(); //在历史记录中前进一步
• history.back(); //在历史记录中后退一步
• history.go(n): //在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

在HTML5中，