【随手小记】vue-router 路由跳转与History堆栈管理

学无止境，记录一下开发过程中，使用vue-router时遇到的路由跳转问题。

跳转需求

我的页面操作是这样的 A -> B -> C , C -> B
都是通过 router.push(path)跳转的
这个时候我在 B页面想点 浏览器回退，我的需求是 B -> A 退回到 A页面；实际情况是： 在B页面时点击浏览器回退会回到 C页面，而不是我想要的 A页面

（灰色箭头： push堆栈添加路由；红色小点： 当前指针；紫色箭头：浏览器回退，长方形：history堆栈）

从上图可知：（只在浏览器回退的情况下）要从B页面 回退到A，需要先回到C，再回到B，最后才能回到A 。

router.replace 和 router.push

查下资料…
router.push() 跳转指定路径，会向历史记录添加路由记录
router.replace() 跳转指定路径，不会向历史记录添加路由记录，注意是指定路径替换了当前路径，指定路径有记录，当前路径没有记录

于是尝试router.replace()， 不记录C页面 ，这里小坑：router.replace(‘target path’)是替换当前页面，换句话说，是用目标路径替换当前路径。我不想记录C页面，就要在C页面中 使用router.replace(B)，这样C页面就不会进入历史记录，但是B页面还是会有记录哟；
实践后发现另一个问题，
我在B页面，点击浏览器回退，回退的不是A，居然是B页面。
又因为实际业务需要，C->B->C->B… 会多次发生，so…历史记录中就有两个甚至更多的B 记录，那么我在B页面 点击回退，还是在B页面, 点击回退还是在B页面，回退还是在B页面…这是合理的吗？太颠了吧！

（灰色箭头： push堆栈添加路由；红色小点： 当前指针；紫色箭头：浏览器回退，长方形：history堆栈）

router.go(-1)

反复思考…
路由跳转还有其他成员：

• router.go(n) ：该方法采用一个整数n作为参数，表示在历史堆栈中前进或后退多少步, 当前指针发生变化。
• router.forward() 前进一步 ，相当于 go(1)
• router.back() 后退一步 ， 相当于 go(-1)

那就浅用一下router.go(-1), 在C页面 ， 通过router.go(-1) 回退来跳转页面 B，当前指针指回B，history.length不会改变；那么在B页面push(‘C’)，由于**curent 非顶端，push时，会在*current后面压入新路由记录而不是在顶端压入！这样既保证了浏览器回退永远都不会到C页面，又保证了B页面不会重复！ 完美。

总结：history栈管理，执行router.push()或者router.replace()会将指定地址path 压入栈顶，并修改当前指针（*current）指向栈顶；执行go(n)时history栈大小并不会改变，只是移动当前指针（*current）的位置，如果当前指针（*current）的位置不是栈顶那么push时会从current位置压入path。
参考博文： History API 与浏览器历史堆栈管理