vue history模式 ios微信分享 踩过的坑

背景：教育项目，整体依赖于微信环境，涉及到微信分享、微信二次分享

问题：vue使用history模式在iso微信下分享设置出错（签名认证错误、分享设置失败）

问题发现路径

1、按照微信公众号官方文档设置微信分享，ios真机测试，第一个进入页面分享设置成功。

2、使用vue router跳转到第二个页面后在分享时，分享设置失败，刷新页面后分享正常。

3、打开微信jssdkdebug模式

4、发现在router跳转后的第二个页面，签名失败(invalid signature)

解决路径：

google后发现，是ios微信对history操作的问题。

在vue-router模式为history的情况下, 由于IOS微信浏览器在验证微信jssdk签名时,需要的URL是第一次进入该应用时的URL, 并不是当前页面的URL, 所以这里需要针对IOS微信浏览器作特殊处理.

修改代码，获取第一次进入页面的uil作为ios签名的url，具体参考（VUE解决微信签名,SPA微信invalid signature问题,完美处理）

通过设置后在本地测试正常（本地域名拦截，代理转发）。于是高高兴兴提测试环境。但是很快心情就不好了。测试环境测试不通过。

继续填坑。。。

有个好的现象（也许是不好的现象），第二个页面的签名通过了，但是分享出去的内容还是错误。分享的标题是公众号的标题，链接是首次进入页面的链接。

为此不停的google google google。但是没有结果。。。。

与同事讨论后，感觉可能是以公共组件的方式调起原因。于是有静下心来更换调用方式，替换成公共方法（为避免大量返工，选择两个页面进行实验）。

将公共组件改成公共js方法。在两个页面中调用方法设置微信分享。本地测试通过，但我已经不相信本地测试了，直接提交测试环境，使用5s测试通过。还是不放心，又使用6、6p、7、7p测试。过了、过了、真的过了~~~~

虽然不知道，这两种调用方式区别在哪里，但是爽啊。。。

参考链接： https://www.jianshu.com/p/a1a31f9da272

https://github.com/vuejs/vue-router/issues/481

https://zhuanlan.zhihu.com/p/31887792

https://www.jianshu.com/p/a1a31f9da272

https://segmentfault.com/a/1190000014455713