解析vue-router到html5的pushState replaceState是如何实现页面不刷新而时时刷新数据的

    首先我们知道vue是单页面应用，一般情况下是不回去刷新页面，应为刷新页面vuex的数据就会不见，那一般url变更的时候，如指定location.href history.push replace 等等页面就会刷新，那么vue页面在实现页面跳转的时候改变了浏览器的url 是怎么实现页面没有刷新而数据刷新的呢
    可以去看一下vue-router的源码 有这么一段代码：

export class HTML5History extends History {
  ...

 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(location, route => {
   pushState(cleanPath(this.base + route.fullPath))
   handleScroll(this.router, route, fromRoute, false)
   onComplete && onComplete(route)
  }, onAbort)
 }

 replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const { current: fromRoute } = this
  this.transitionTo(location, route => {
   replaceState(cleanPath(this.base + route.fullPath))
   handleScroll(this.router, route, fromRoute, false)
   onComplete && onComplete(route)
  }, onAbort)
 }
 ...
}

在看看里面的

export function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 // try...catch the pushState call to get around Safari
 // DOM Exception 18 where it limits to 100 pushState calls
 const history = window.history
 try {
  if (replace) {
   history.replaceState({ key: _key }, '', url)
  } else {
   _key = genKey()
   history.pushState({ key: _key }, '', url)
  }
 } catch (e) {
  window.location[replace ? 'replace' : 'assign'](url)
 }
}

清楚了吧，就是用的html5的history新增的方法：pushState和replaceState。
先说一下history的作用是保存当前窗口访问过的所有url的地址，可以通过history.back history.go(-1) 来访问历史记录的URL. history.forward() 来跳转到下一个URL

1.history.pushState()
他的作用就是在当前窗口访问的历史URL中在增加一条URL
pushState()他不会触发页面刷新，只是history的对象发生了变化，并且执行这句话之后浏览器地址栏也会变化，只是改变了地址栏，页面不回变化。
他有三个参数

window.history.pushStat(stata,title,url)

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

2.history.replaceState()
History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一样，替换当前浏览器的地址，页面不刷新
如果URL为 ： https://blog.csdn.net/yexudeng/art/det

history.pushState({page: 1}, 'title 1', '?page=1')
//https://blog.csdn.net/yexudeng/art/det?page=1

pushState() 方法新增一条历史记录
replaceState() 替换当前的历史记录

3.popState事件
同一域名下，当浏览器的地址发生改变时就会触发popstate事件
但是仅仅只有pushState和replaceState方法并不会触发该事件，用户必须点机浏览器的前进或者倒退按钮才会触发事件 或者调用history.back forword go这些方法才会触发。

注册事件：

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

注意页面初始化第一次加载的时候不会出发popstate事件