vue hash模式下微信分享后打开首页，三种完美解决方案

微信分享功能给我们带来了很大的便利，使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播。所以呢，基本上每个基于微信开发的 H5 都会集成微信分享功能。但是，前几天在对接微信分享 API 的时候发现了一个大坑。使用 vue 框架开发的应用，分享出去的链接会被截断：

正常链接：https://hxkj.vip/#/article?article_id=8
分享出去的链接被打开之后变成了：https://hxkj.vip/?from=singlemessage&isappinstalled=0
对，就是这么坑。不仅路由被切掉了，参数也没了。。。。。。

针对以上问题，首先想到的就是网上找方法求救。其中找到一个方法：(本文待分享链接都使用 shareLink 作为变量名)

let shareLink = window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1]; // 使用这种方法重新拼接一下当前连接

然而，并没有什么用，该被切还是被切。于是，就诞生了以下三种有效的方法。

1、全局路由里拦截链接
2、前端页面中转，重定向
3、借助后端重定向

一、全局路由里拦截链接

1、在 # 号前面加上 ? 号

经过试验发现，只要在路由的 # 号前面加上？号，微信分隔链接的时候只会在域名与参数之间加上 ?from=singlemessage&isappinstalled=0，后面还是会携带原本的参数的，不会被完全切掉。所以，加上之后：

let shareLink = 'https://hxkj.vip/?#/article?article_id=8';
shareLink = shareLink.replace('/#/', '/?#/');

待分享的链接变成了：https://hxkj.vip/?#/article?article_id=8
分享出去之后，链接变成了这个：https://hxkj.vip/?from=singlemessage&isappinstalled=0#/article?article_id=8

发现区别了吧，这次虽然被插入了 ?from=singlemessage&isappinstalled=0 这一串东西，但是最起码路由和参数还保留着，接下来我们就要对这一段链接进行处理了。

2、正则替换 `?from=singlemessage&isappinstalled=0`

这一步需要在 vue 全局路由里完成，操作如下：

// router.js
router.beforeEach((to, from, next) => {
    let url = window.location.href;
    if (url.includes('?from=')) { // 判断是否携带了 from 参数，这一步灵活变通，只要能判断出是从微信分享链接进来的就 OK
        url = url.replace(/vip.+.#/, 'vip/#'); // 利用正则表达式去掉微信携带的 ?from=singlemessage&isappinstalled=0 这串参数，如果这串参数对于你当前的页面有用处的话，可以重新拼接到你正常的链接后面去
        window.location.href = url; // 重定向到正常链接
    }
})

上面这段代码的核心在于正则替换 url = url.replace(/vip.+.#/, 'vip/#')，这并不是吃饱了没事干，非要写正则。而是微信分享到每个渠道（微信单人聊天、微信群聊、朋友圈、QQ...）所携带的 from 参数是不一样的，所以需要从域名后缀那里开始往后匹配，直到 # 号为止。替换之后，就相当于把微信添加上去的那一串参数给删除了！

以上步骤操作正确的话：

待分享的链接为：https://hxkj.vip/?#/article?article_id=8
分享出去之后，再次打开分享链接。由于路由那里做了处理，链接变为为正常状态：https://hxkj.vip/#/article?article_id=8

二、前端页面中转，重定向

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 = 'https://hxkj.vip/#/article?article_id=8';
shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink);

这个方法，比第一个方法多了个中间页，总体来说，还是比较方便的。

以上步骤操作正确的话：

待分享的链接为：https://hxkj.vip/redirect.html?shareRedirect=https%3A%2F%2Fhxkj.vip%2F%3F%23%2Farticle%3Farticle_id%3D8
分享出去之后，再次打开分享链接。由于中间页面做了重定向处理，链接变为为正常状态：https://hxkj.vip/#/article?article_id=8

三、借助后端重定向

let shareLink = 后端地址;

这种方法相对于第二种方法，没有本质的区别。只是相当于把重定向那一步放到后端去处理了。页面分享的链接为后端同事给出来的地址。

四、总结

At last，看完之后有什么不懂的，可以留言反馈。

转载请注明出处：https://www.jianshu.com/p/97729dd2c94d
作者：TSY
个人空间：https://hxkj.vip

vue hash模式下微信分享后打开首页，三种完美解决方案

一、全局路由里拦截链接

1、在 # 号前面加上 ? 号

2、正则替换 ?from=singlemessage&isappinstalled=0

以上步骤操作正确的话：

二、前端页面中转，重定向

1、新建中转页

2、组装分享链接

以上步骤操作正确的话：

三、借助后端重定向

这种方法相对于第二种方法，没有本质的区别。只是相当于把重定向那一步放到后端去处理了。页面分享的链接为后端同事给出来的地址。

四、总结

At last，看完之后有什么不懂的，可以留言反馈。

2、正则替换 `?from=singlemessage&isappinstalled=0`