vue-router this.$router.push、replace、go的区别

this.$router.push：跳转到指定路径，并在history栈中添加一个记录，点击后退会返回到上一个页面

// 字符串
this.$router.push('index') 

// 对象
this.$router.push({path: '/index'})
this.$router.push({name: 'index'})

// 带参数及获取参数
this.$router.push({path: '/index', query: {'a': 1}})
this.$route.query.a

this.$router.push({name: 'index', params: {'a': 1}})
this.$route.params.a

this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数，相当于 window.history.go(n)，可以通过 window.history.length 得到历史记录栈中一共有多少页

// 前进 等同于 history.forward()
router.go(1)

// 后退 等同于 history.back()
router.go(-1)

// 前进 3 条记录
router.go(3)

// 记录不存在返回 undefined 并且不会跳转
router.go(100)
router.go(-100)

扩展一下添加/修改历史记录条目

1、pushState(stateObject,title,URL)

状态对象 stateObject ：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate 事件都会被触发，并且事件对象的 state 属性都包含历史记录条目的状态对象的拷贝；（FireFox浏览器强行限制状态对象的大小为640k，超出则抛异常，可通过sessionStorage或localStorage存储大的数据）

标题 title：传入一个简短的标题，标明将要进入的状态；（FireFox浏览器目前会忽略该参数，但是传一个空字符串会比较安全）

地址 URL：新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；浏览器不会在调用 pushState() 方法后加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。

某种意义上，调用 pushState() 有点类似于设置 window.location=’#test’，它们都会在当前文档内创建和激活新的历史记录条目。

2、replaceState()

history.replaceState() 操作类似于 history.pushState()，不同之处在于 replaceState() 方法会修改当前历史记录条目而并非创建新的条目。

3、popstate()

每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取状态

如果页面中使用 pushState() 或 replaceState() 方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发 onload 事件，但不会触发popstate 事件。可以使用 history.state 直接读取当前历史记录条目的状态，而不需要等待 popstate 事件。

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件，pushState 事件只会在其他浏览器操作时触发，比如点击后退按钮、或者在 JavaScript 中调用 history.back() 方法

// 调用方法
window.onpopstate = function(event) {
    event.state; // 当前历史记录条目的状态
    // do somethin
};

// 或者
window.addEventListener('popstate', function(event) {
  // do something
});