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

  • 相关阅读:
    Android 图片文字单位 px、dp、sp区别
    替换Fragment 报错 The specified child already has a parent. You must call removeView() on the child's parent first.
    Android 程序怎么打log
    Android 启动项 Activity
    Actiivity 生命周期
    Oracle 监听/数据库 启动/关闭
    【HDU-2049】不容易系列之(4)——考新郎
    Linux内存子系统——Locking Pages(内存锁定)
    command三国杀开发日记20200915
    command三国杀开发日记20200914
  • 原文地址:https://www.cnblogs.com/xyyt/p/7533091.html
Copyright © 2011-2022 走看看