前言
最近接手了一个Vue SSR项目。此项目一开始为SPA应用，为了更好的SEO，按照 SSR官网教程 改造成了SSR渲染。接手后发现此项目有个问题：需要点击两次浏览器回退按钮才能回到上一个页面。
按代码提交记录来看，这个问题至少在线上挂了近一年了。真不知道当初是如何测试的。
正文
我仔细查看了代码，在路由跳转前，的确只调用了一次$router.push。我首先查看路由变更前后，history的长度变化，可以看到路由只变了一次，为何栈中却多了两条记录？由此引起要回退两次才能回到上一个页面。
由此，我开始了阅读和断点调试 vue-router 源码，尽管到最后你会发现问题不在于vue-router，但是从阅读与调试的过程中，加深了对 vue-router 的理解。我一直以问题来驱动阅读源码，如直接看一个项目的源码，我少有收获，最后被绕得晕头转向。现有如此机会，不可错过。
$router.push
在路由跳转时，我们调用了$router.push，下面来寻找一下这个方法。
在src/index.js下，我们看到了这个push方法，它里面调用history对象的方法。在上面我们可以看到router的构造函数，里面也实例化了history。
在H5路由模式下，我们的history由HTML5History实例化。我们再查看一下history/html5.js下的HTML5History类：
pushHash。pushHash在H5路由模式下就是调用了/util/push-state下的pushState：
window.history.pushState，关于pushState，可以看看MDN
popstate事件
虽然已经确定是栈中多了两条记录才引起的需两次点击，但一开始我也怀疑是popstate事件没生效，我们顺便看看popstate代码，在此之前先看看MDN。
用户点击浏览器的回退按钮时，将会触发popstate事件，下面我们搜一下这个代码。
可以看到，我们只是监听了popstate事件做了组件切换和滚动，由于上一条路由记录和当前的相同，所以页面不会有什么变化。
vuex-router-sync
在断点调试时，我一直发现pushState会被调用两次，使我不得不再思考，在某个看不见的地方一定还调用了$router.push。 功夫不负有心人，在app.js中我发现两句不明所以的代码，注释之，页面问题解决。
下面看看为什么代码中会引入vuex-router-sync-for，它是干嘛的？vuex-router-sync-for这个库已经有三年没更新了。我发现在Vue ssr官网教程就是这样做的：
在what-is-vuex-router-sync-for这个问题大概说明了vuex-router-sync的作用。
提问者：我已经有
this.$router了，我为什么还要去store.state.route获取？ answer：在Vuex中不能使用this.$router，但使用vuex-router-sync后可以让你在Vuex中获取到router。
看样子这个东西不是Vue SRR必需品，况且项目中也没在vuex中获取路由。vuex-router-sync-for已经很久没更新了。
那么store.watch是几时触发的呢，在entry-client.js中还有一段代码：
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__);
}
把这一句去掉后，页面也正常了。 这一段也是 服务器端数据预取-server-data-fetching 文档中添加的：
结尾
看样子，同事也是老老实实按照文档操作的，那是vue ssr的文档有问题吗？ 我不知道文档是否有点过时了，如果按照这个文档来配置的话，这个问题别人应该早发现了，但查了一下好像也没见到别人有这样的问题。有点郁闷。你们有吗你们有吗？？
我好菜我好菜
