vue路由hash模式，自定义分享踩坑

需求背景：商品详情页，直播详情页有个分享按钮，点击需要跳转到分享页面，然后进行自定义分享，把我们的的商品详情或直播详情分享出去，然后用户点击链接进入对应详情页。

微信分享首先需要通过config接口注入权限验证配置，然后再进行自定义分享内容。

坑点1：wx.config签名错误

如果我们把当前带了hash值的路由直接拿去生成签名，那这个签名一直会报错。

解决方案：把#号之前的地址拿去生成签名，用于签名地址：window,location.href.split("#")[0]；

坑点2：分享出去的链接会被截断,不仅路由被切掉了，参数也没了。

正常链接 

https://test.cn/#/live?live_id=72

分享出去的链接被打开之后变成了：

https://test.cn/?from=singlemessage&isappinstalled=0

解决方案：前端页面中转，重定向(亲测有效，简单方便)，只需两步。

1、新建中转页

在 public 文件夹里新建一个 html 页面（与项目中 index.html 同级），命名为 redirect.html，文件内容如下

<script>
    let url = location.href.split('?')
    let params = url[1].split('&')
    let data = {}
    params.forEach((n, i) => {
        let p = n.split('=')
        data[p[0]] = p[1]
    })
    if (!!data.shareRedirect) {
        window.location.href = decodeURIComponent(data.shareRedirect)
    }
</script>

因为只作为跳转使用，所以不需要其他的东西，只需要写 js 就可以了

2、组装分享链接

把要分享的链接，设置为中间页面的路径

let shareLink = 'http://test.cn/#/live?live_id=72';
shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink)

更多解决方案--->：www.jianshu.com/p/97729dd2c…

友情提醒：如果你用了中转页方式，那你就要修改所有的分享，否则微信自带的链接分享出去还是会有问题，如下

http://test.com/s/aaa/?from=singlemessage&from=singlemessage#/goods/xx

那如果你自定义分享用了中转页，但是微信自带分享有问题，可以使用如下解决方案：

//把微信加进来的参数去掉,进行重组url
router.beforeEach(async (to, from, next) => {  let url = window.location.href;  if (url.includes("from=")) {    let newUrl =      window.location.origin + window.location.pathname + window.location.hash;    window.location.href = newUrl;    return;  }

希望大家使用vue路由hash模式做分享时能少踩坑，因为真的太费时间了。。。。。。