vue-router浏览器跳转

问题一：vue-router单页跳转为什么不刷新？

我们知道通过vue-router进行页面跳转时，组件会被重新执行，由于变量存在内存中，所以页面不会刷新。但，使用href、window.location进行跳转，产生的history变化，将使得页面重新刷新。

问题二：vue router 和 window.location、href 下产生的跳转行为表现，那么这些跳转背后的实质是什么呢？

1.跳转基础知识

window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员如下：
方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)
属性：length、state
事件：window.onpopstate
以上斜体标注的为HTML5新增特性。

方法说明：
back()：回退到上一个访问记录；
forward()：前进到下一个访问记录；
go(num)：跳转到相应的访问记录；其中num大于0，则前进；小于0，则后退；
pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新；
replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新；

另，HTML5新增了可以监听history和hash访问变化的全局方法：
　　　　window.onpopstate：当调用history.go()、history.back()、history.forward()时触发；pushState()\replaceState()方法不触发。
　　　　window.onhashchange：当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发。触发的情况如下：
　　　　　 a、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分；
　　　　　 b、使用不同history操作方法到带hash的页面;|
　　　　　 c、点击链接跳转到锚点。
　　　　　
　　　　　

2.浏览器history变化与浏览器的行为

history栈变更图

展示了初始长度为4的history栈，在不同操作方法下的变化情况，下面对每步进行分析：
step1～step4：均为history的访问方法，获取相应的历史记录中的url；
step5：通过location.href创建一个新的url记录，其将当前url2之后的记录清空，并在其后新增url5；history长度由4变成3；history的每次新增操作，都会将其后记录清空，在其后新增记录。
step6：通过pushState方法创建一个新的url记录，其也是清空、再新增记录；
step8：通过replaceState方法修改一个url记录，其不会产生新记录，而是将当前记录进行修改。
值得注意的是，通过pushState新增或者修改的history记录，被访问时，当前页面不刷新。而locaiton.href生成的记录被访问时，页面将进行刷新。