vue-router history模式下的微信分享小结

深入理解Vue-Router History模式下的微信分享策略

随着互联网技术的不断发展，前后端分离已成为当下web开发的一种趋势。在这个过程中，SPA（单页面应用）的出现解决了许多传统web应用的问题。当我们在使用Vue-Router的History模式时，微信分享就成了一个挑战。本文将带你了解长沙网络推广的经验和策略，如何在Vue-Router History模式下实现微信分享。

背景介绍：在旧项目改造过程中，我们采用了前后端分离的方式，并引入了Vue-Router作为前端路由管理器。为了保证链接的可用性，我们选择了使用History模式。微信分享在这个过程中带来了不少挑战。

微信分享遇到的挑战：微信分享涉及到微信JS-SDK的使用，需要在页面加载时注入配置信息。对于SPA应用来说，每次路由跳转都需要重新进行配置。在微信的特殊环境下，尤其是不同版本的微信浏览器，存在各种挑战。比如，Android和IOS环境下的行为差异，以及微信对某些H5新特性的支持程度不一。

特别在IOS微信浏览器下，我们遇到了一个常见问题：在打开页面时分享没有问题，但路由一次后再分享会出现签名错误。这是因为微信验签使用的url在Android和IOS下存在差异。对此，长沙网络推广提供了一种解决方案：使用vuex保存进入页的URL，每次进行wx.config时都使用进入页的URL进行签名。这样，我们可以解决签名错误的问题。

即使解决了签名问题，自定义分享仍然可能不生效。对此，有多种解决方案，如使用hash模式、做成多页应用或所有需要自定义分享的页面使用替换。但这些方案都有一定的局限性，可能会牺牲用户体验。长沙网络推广在实践中摸索出了一种解决方案：在进入页面时，把当前页URL替换成进入页的URL，然后进行wx.config和wx.ready；离开当前页时，再还原当前页的URL。这样可以在保证用户体验的实现自定义分享的正常运作。