微信分享功能给我们带来了极大的方便，让基于微信开发的H5页面可以很好的通过微信平台传播。所以基本上每个基于微信开发的H5都会集成微信分享功能。但是前几天在连接微信分享接口的时候发现了一个大坑。使用vue框架开发的应用，分享链接会被截断：正常链接：https://hxkj.vip/#/article?ar...分享链接打开后，变成：https://hxkj。vip/?from=single...是的，这就是诀窍。不仅路由断了，参数也没有了。.....针对以上问题，首先想到的就是想办法在线求助。找到其中的一个方法：（本文所有要分享的链接都以shareLink为变量名）letshareLink=window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1];//使用此方法重新组装当前连接。然而，这是没有用的。它应该被切割或切割。因此，诞生了以下三种行之有效的方法。1.拦截全局路由中的链接2.重定向前端页面并重定向3.借助后端重定向1.拦截全局路由中的链接1.添加？加？不会，微信分离链接时，只会在域名和参数之间加上?from=singlemessage&isappinstalled=0，后面还会带上原来的参数，并不会完全切断。所以，添加后：letshareLink='https://hxkj.vip/?#/article?article_id=8';shareLink=shareLink.replace('/#/','/?#/');待分享链接变成：https://hxkj.vip/?#/article?a...分享后链接变成这样：https://hxkj.vip/?from=single...发现不一样好了，这次虽然插入了?from=singlemessage&isappinstalled=0的字符串，但是至少路由和参数还是保留了下来。接下来，我们将处理这个链接。2、定期更换？from=singlemessage&isappinstalled=0这一步需要在vue全局路由中完成，操作如下：//router.jsrouter.beforeEach((to,from,next)=>{leturl=window.location.href;if(url.includes('?from=')){//判断是否带from参数，这一步比较灵活，只要能判断出是来自微信分享链接就OKurl=url.replace(/vip.+.#/,'vip/#');//用正则表达式去掉微信自带的?from=singlemessage&isappinstalled=0这串参数，如果这串参数对你当前有用页面，可以重新拼接到你的正常链接后，转到window.location.href=url;//重定向到正常链接}})上面代码的核心是将url替换为regularity=url.replace(/vip.+.#/,'vip/#'),不是吃饱了就没事干，所以要写正则。而是微信给各个渠道（微信单聊、微信群聊、朋友圈、QQ……）携带的from参数不一样，所以需要匹配从域名后缀到##为止。替换后相当于删除了微信添加的那串参数！如果以上步骤都正确执行：要分享的链接是：https://hxkj.vip/?#/article?a...分享完成后，再次打开分享链接。由于在路由中做了处理，链接变得正常：https://hxkj.vip/#/article?ar...2.前端页面传输，重定向1.新建一个传输页面，新建一个公用文件夹下的一个html页面（与项目中的index.html同级），名为redirect.html，文件内容如下：因为只是作为一个跳转，所以不需要其他东西，写js就行.2.组装分享链接和分享链接，设置为中间页路径letshareLink='https://hxkj.vip/#/article?article_id=8';shareLink=window.location.href.split('#')[0]+'redirect.html?shareRedirect='+encodeURIComponent(shareLink);这种方法比第一种方法多了一个中间页面。总的来说还是比较方便的。如果以上步骤正确：要分享的链接为：https://hxkj.vip/redirect.htm...分享完成后，再次打开分享链接。由于中间页面已经重定向，链接就正常了：https://hxkj.vip/#/article?ar...3、使用后端重定向letshareLink=后端地址；这种方法相对于第二种方法，没有本质区别。只是相当于把重定向的步骤放到了后端去处理。页面分享的链接是后台同事给的地址。4.最后总结一下。看完有什么不懂的可以留言反馈。转载请注明出处：https://www.jianshu.com/p/977...作者：TSY个人空间：https://hxkj.vip
