Vue2.0 hash模式关于微信分享遇到的坑

使用Vue.js开发微信公众号网页，需要进行微信分享，遇到两个问题，在此记录。

1.解决微信分享“#”后面内容分享后丢失的问题。

由于我使用的路由模式为hash模式，每一个页面的路径为 

http://www.abc.com/#/good?goodsId=1

这样的模式，分享的链接也是这个，当分享给微信好友后，分享的链接变成

http://www.abc.com/?from=singlemessage/#/

这样的形式，hash部分丢失，打开后到首页。所以就先想办法吧hash给补上吧。经过测试后，发现这样可以（亲测）

解决方案：

假设当前的地址路径为   http://www.abc.com/#/good?goodsId=1

那么修改分享的链接为  http://www.abc.com/?/#/good?goodsId=1,

这样修改后，分享出去的链接变为  http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1,

hash部分就有了。

2.解决微信二次分享问题。

上一步解决了微信分享后hash部分丢失的问题，当第一次分享出去的链接，被好友再次分享时，会出现问题，比如图片不显示、描述不显示等等，在此要对分享后的链接做出修正。我们在vue的路由里面，对跳转链接进行拦截，判断链接里面有没有"?/&from"之类的字符，如果有，说明是分享的链接，把携带的from之类的字符串去掉。

解决方案：

以   http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1  这个链接为例

截取  "?/&"这个字符串之前的部分，得到  http://www.abc.com/

截取  "#"  这个字符串以及之后的部分，得到   #/good?goodsId=1

将两个字符串进行拼接，得到  http://www.abc.com/#/good?goodsId=1

然后使用H5 相关API  ，history.replaceState(),对当前   http://www.abc.com/?/&from=singlemessage/#/good?goodsId=1  地址做出修改。

history.replaceState(null,"",http://www.abc.com/#/good?goodsId=1)即可

这个问题的处理都在路由拦截器里面操作。