前端路由
一、路由
在现在前端开发中，路由是非常重要的一环，但是路由到底是什么呢？
从路由的用途上来说
从路由的实现原理上来说：路由就是URL到函数的映射。
路由本身也经历了不同的发展阶段：
1.后端路由
2.前端路由
后端路由：又可以称为服务器端路由，因为对于服务器来说，当接收到客户端发过来的HTTP请求，就会根据所请求的相应的URL来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。
对于最简单的静态资源服务器，可以认为所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据处理等等。
然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面，这种方式在早期的前端开发中非常普遍，它的好处和坏处都很明显：
好处：安全性好，SEO好。（SEO（Search Engine Optimization），就是传说中的搜索引擎优化，是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为）
缺点：加大服务器的压力，不利于用户体验，代码冗合。
正式由于后端路由还存在着自己的不足，前端路由才有了属于自己的一片天地与发展空间。
前端路由：路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样当访问不同路径的时候，会显示不同的页面组件，前端路由主要有以下两种实现方案：
1.hash
2.history API
二、前端路由的实现
1.基于hash
早期的前端路由的实现就是基于location.hash来实现的。实现原理也很简单就是：监听#后面的内容来发起Ajax请求来进行局部更新，而不需要刷新整个页面。
location.hash的值就是URL中#后面的内容。
例如:https://www.happy.com#me中的 location.hash = ‘#me’
hash也存在下面几个特性：
1.URL中的hash值只是客户端的一种状态，也就是说当向服务器发出请求时，hash部分不会被发送。
2.hash值的改变，都会在浏览器的访问历史中增加一个记录，因此我们能通过浏览器的回退，前进按钮控制hash 的切换。
3.我们可以使用hashchange事件来监听URL的变化
触发hash变化的方式也有两种：
1.通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生变化，也就会触发hashchange事件了
2.直接使用js来对location.hash进行赋值，从而改变URL 触发hashchange事件
例如： location.hash = '#hahha'
3.浏览器前进后退改变 URL，触发hashchange事件
2.基于History API
history API可以分为两大部分：切换和修改
切换历史状态：包括back() ,forword() ,go(n) 三个方法，分别对应浏览器的前进，后退，跳转操作。
history.go(-2) //后退两次 + 刷新 history.go(2) //前进两次 history.back() //后退 （不刷新） history.forword() //前进 //back() 方法可加载历史列表中的前一个 URL（如果存在）。调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。 //forward() 方法可加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
修改历史状态：包括pushState() ,replaceState() 两个方法，都接收三个参数：stateObj ，title , url
这两个方法在不进行刷新的情况下，操作浏览器的历史记录。pushState() 是新增一个历史记录。replaceState() 是直接替换当前的历史记录。
- 状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。
- 标题（title）：一般浏览器会忽略，最好传入null。
- 地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
