vue-router原理

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求的有两种方式：

1、在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航

2、使用h5的window.history功能，使用URL的hash来模拟一个完整的URL

当打包构建应用时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了，这时在写路由的时候就要考虑，路由懒加载了，就不会造成打包文件大。

window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员如下：

back():回退到上一个访问记录

forward()：前进到下一个访问记录

go(num):跳转到相应的访问记录，其中num大于0，则前进，小于0，则后退

pushState(stateData,title,url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新

replaceState(stateData,title,url):修改当前的访问记录，不能跨域，且不造成页面刷新，h5新增了可以监听histoyr和hash访问变化的全局方法

window.onpopstate：当调用history.go()、history.back()、history.forward()时触发；pushState()\replaceState()方法不触发。

window.onhashchange：当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。触发的情况如下：

　　　　a、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分；

　　　　b、使用不同history操作方法到带hash的页面;

　　　　c、点击链接跳转到锚点

 

vue-router其实实质就是在H5 historyAPI、window.onpopstate、window.onhashchange上做的封装，通过一定得规则映射到对应的方法上，同时通过监听变化，从而实现单页路由。

浏览器history的发展：

我们知道在使用location.href、a标签的href[非锚点的方式]等，进行页面访问时，页面会刷新。但随着大前端时代的到来，产生了异步单页来提升性能。我们不再希望每次的跳转都带来页面的刷新，而是希望这种跳转仅仅引发数据变化，从而改变视图。

此时，产生了HTML5 history API。这些API，是为了解决异步单页的路由问题，使得页面在不刷新的情况下，带来视图的变化，同时变化后的信息能得到准确的传播。