Vue SSR的坑，路由两次跳转

最近接手了一个项目。此项目一开始为SPA应用，为了更好的SEO，按照 SSR官网教程改造成了SSR渲染。改造后发现此项目有个问题：需要点击两次浏览器回退按钮才能回到上一个页面。

image.png

我仔细查看了代码，在路由跳转前，的确只调用了一次$router.push。我首先查看路由变更前后，history的长度变化，可以看到路由只变了一次，为何栈中却多了两条记录？由此引起要回退两次才能回到上一个页面。

image.png

由此，我开始了阅读和断点调试 vue-router 源码，尽管到最后你会发现问题不在于vue-router，但是从阅读与调试的过程中，加深了对 vue-router 的理解。

在路由跳转时，我们调用了$router.push，下面来寻找一下这个方法。

image.png

在src/index.js下，我们看到了这个push方法，它里面调用history对象的方法。在上面我们可以看到router的构造函数，里面也实例化了history。

image.png

在H5路由模式下，我们的history由HTML5History实例化。我们再查看一下history/html5.js下的HTML5History类：

image.png

可以看到其push方法里使用transitionTo转换路由，并且调用了pushHash。pushHash在H5路由模式下就是调用了/util/push-state下的pushState：

image.png

可以看到，就是调用了window.history.pushState，关于pushState，可以看看MDN

虽然已经确定是栈中多了两条记录才引起的需两次点击，但一开始我也怀疑是popstate事件没生效，我们顺便看看popstate代码，在此之前先看看MDN。

用户点击浏览器的回退按钮时，将会触发popstate事件，下面我们搜一下这个代码。

image.png

可以看到，我们只是监听了popstate事件做了组件切换和滚动，由于上一条路由记录和当前的相同，所以页面不会有什么变化。

在断点调试时，我一直发现pushState会被调用两次，使我不得不再思考，在某个看不见的地方一定还调用了$router.push。
功夫不负有心人，在app.js中我发现两句不明所以的代码，注释之，页面问题解决。

image.png

打开文件查看，原来在里面调用了router.push！终于找到你了！

image.png

下面看看为什么代码中会引入vuex-router-sync-for，它是干嘛的？vuex-router-sync-for这个库已经有三年没更新了。我发现在 Vue ssr官网教程就是这样做的：

image.png

在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已经很久没更新了。如果要在Vuex中获取到router，自己加一下就好，不要用这个过时的包了。

那么store.watch是几时触发的呢，在entry-client.js中还有一段代码：

if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
}

这一句是将服务端渲染时获取到的store数据，注入到客户端，俗称注水与脱水。如果服务端不需要预先获取数据存store。这一句也可以去掉，页面就正常了。

image.png

看样子，我之前是老老实实按照文档操作的，那是vue ssr的文档有问题吗？
我不知道文档是否有点过时了，如果按照这个文档来配置的话，这个问题应该会被发现，但查了一下好像也没见到别人有这样的问题。有点郁闷。

最后编辑于：2023.05.10 00:43:17