zoukankan      html  css  js  c++  java
  • 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  是后端提供接口,接收前端传递的域名以及路由参数,经后端处理重新合成完成的前端路由。

  • 相关阅读:
    uiatuomator如何调试
    uiatuomator提示shortMsg=java.lang.RuntimeException
    uiatuomator命令启动apk,与查找多个相同控件
    uiautomator日志文件转换为xml格式文件
    uiautomator做自动化的过程
    uiautomator的坑和AAPT命令方式启动一个应用程序
    ADB无线连接
    用fiddler工具做接口测试
    简单的monkey使用
    疯狂学习java web2(css)
  • 原文地址:https://www.cnblogs.com/xyyt/p/7533091.html
Copyright © 2011-2022 走看看