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

  • Z时代
  • 2024-01-10
  • 分类：综合

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  是后端提供接口，接收前端传递的域名以及路由参数，经后端处理重新合成完成的前端路由。

以上是 vue项目微信分享之后路由链接被破坏怎么办 的全部内容， 来源链接： utcz.com/z/380237.html

回到顶部