vue项目微信分享之后路由链接被破坏怎么办

异常现象:

  多页面应用,路由采用hash模式,链接带有"#"。

  在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出去的链接只能进入首页,无法正常跳转到其他路由。

//1. 初始路由链接:
http://wx.xxx.com/wx/#/classifylist/1
//2. 分享链接被打开之后:
http://wx.xxx.com/wx/?fromTimeline

解决思路:

最开始的想法就是去掉“#”,但是使用history模式去掉“#”之后,主路由(首页)可以正常访问,其他页面从主路由进入也是OK的,但是进入其他页面刷新页面的话就无法正常访问了。查资料,找大牛,结果还是多页面应用无法正常使用history模式,这条路走不通。

然后就是考虑使用其他字符替换“#”,然后在路由中对访问链接进行判断,如果是用户通过分享链接访问,把链接中的替换字符重新换回“#”,这样也就不会影响路由之间的跳转了,具体代码如下:

//在主vue中将路由中的"#"替换为"?",并将#后边的内容编码后追加到"?"后边
var urls=location.href.split('/#')[0]+"?"+encodeURIComponent(location.href.split('/#')[1])
                    
//路由中对访问url进行判断,如果是访问的分享链接,对链接进行路由还原,再重定向到正确的路由,微信追加的 ?fromtimeline 之类的参数已经被?切割掉了,务需理会
var href = location.href.split("?")[0]+"#"+decodeURIComponent(location.href.split("?")[1])
location.href = href

虽然有点麻烦,还是解决问题了,本地调试OK,测试服务器上也没问题,传到阿里云的服务器上又凌乱了:

后来尝试了下发现,只要不是项目中的真实路由,就会直接给出这个错误提示,也就是说直接被阿里云给拦下了,根本就到不了服务器,更别提路由中进行路由还原重定向了,继续探索新的方法!

既然阿里云不接受非真实路由访问,那就考虑后端重定向吧——后端提供接口,前端在分享配置中,对要分享出去的url进行编码,然后作为参数传递给后端接口,由后端接口直接把参数解码,还原前端路由,重定向,搞定!

var UrlAttr = location.href.split('#')
var urls = wxShareLinkTransformUrl + "?host=" + encodeURIComponent(UrlAttr[0]) + "&param=" + encodeURIComponent(UrlAttr[1])

途中 wxShareLinkTransformUrl  是后端提供接口,接收前端传递的域名以及路由参数,经后端处理重新合成完成的前端路由。

 

posted on   逍遥云天  阅读(8412)  评论(0编辑  收藏  举报

编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2014-09-19 使用UltraISO制作光盘镜像
2014-09-19 安装配置Windows Live Writer做为博客客户端
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示