提到路由管理，不得不说的是window.history这个API。
它允许操作浏览器中 标签页 或者框架里访问的历史记录。
history提供的几个方法：
1. go(num) - 前往浏览器历史记录中相对当前页面位置的页面
num > 0，表示前进；
num < 0，表示后退；
num = 0，表示刷新，同location.reload()效果。num也可以不填，history.go()也是刷新页面。
2. back() - 回到上一个访问记录
同history.go(-1)
3. forward() - 前往下一个访问记录
同history.go(1)
4. pushState(state, title, url) - 在历史记录中创建一个新记录
pushState和replaceState是h5新增的方法，同时还新增了window.onpopstate事件。
一般使用pushState和replaceState时，前两个参数传null，如history.pushState(null, null, '/goods/list')
5. replaceState(state, title, url) - 修改历史记录中当前记录
除了上面的5个方法，history api还提供了几个属性，其中最为有用的是length属性。
length属性 - 只读属性，表示当前历史记录中记录的数量。
新开标签页时，history.length为1。
路由跳转的实质
history这个api在其内部维护着一个访问历史记录，这个访问历史记录是一个栈结构，浏览器为了保护用户访问历史的安全，没有对外暴露这个访问记录。
假设有两个前端微服务项目，一个是基金定投(fundfixed)，一个是基金项目(fund)。
基金定投(fundfixed)项目下的页面：
- 首页(/fundfixed/)
- 定投列表页(/fundfixed/list)
- 定投详情页(/fundfixed/detail)
- 定投记录详情页(/fundfixed/record/detail)
基金(fund)项目下的页面：
- 基金详情页(/fund/detail)
- 基金经理介绍页(/fund/manager)
注：绿色的表示当前标签显示的记录页面。
跳转说明
- 新开一个标签页，打开定投首页。可以通过
window.open()来打开一个标签页，此时history.length为1。 - 通过vue-router中的
$router.push跳转定投列表页。其实底层就是使用的history.pushState，往路由栈中添加一条记录，并展示。 - push到定投详情页。
- 通过
location.href跳转到基金详情页。同样会在路由栈中添加一条记录并展示。 - 通过
location.href跳转到定投详情页。基金项目都是通过携带的backUrl，使用location.href返回上一页面。 - 使用
$router.go(-1)返回上一页，其实就是使用history.go(-1)，此时将指向路由栈中当前显示的那个页面的位置的指针下移，展示的是基金详情页。 - 再次
go(-1)，展示定投详情页。 - 再次
go(-1)，展示定投列表页。其实从第5步返回到定投详情页，点击返回，我们希望一次性返回到定投列表页，可以使用go(-3)。
- 如果此时再push到定投详情页。则会清空定投列表上方的历史记录，添加一条定投详情页记录并展示。
- 补充一下。如上图通过
go(-3)从定投详情页返回到定投列表页，如果这里的go(-3)不小心写了go(-5)会怎样呢？定投详情页下方只有4条记录，-5已经超出了下方的记录条数，此时浏览器不会有任何反应，也不会报错。同理，go(100)也不会有任何反应。
