博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue项目微信分享之后路由链接被破坏怎么办
阅读量:4701 次
发布时间:2019-06-09

本文共 1325 字,大约阅读时间需要 4 分钟。

异常现象:

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

 

转载于:https://www.cnblogs.com/xyyt/p/7533091.html

你可能感兴趣的文章
Oracle 组函数count()
查看>>
Session的使用过程中应注意的一个小问题
查看>>
SDK,API,DLL名词解释
查看>>
试探算法
查看>>
jquery.validation.js 使用
查看>>
Nginx 相关介绍
查看>>
leetcode[33]Search in Rotated Sorted Array
查看>>
eval(PHP 4, PHP 5)
查看>>
readelf用法小记
查看>>
Java中JavaScript unescape与escape函数算法
查看>>
js的基础要点
查看>>
C#/IOS/Android通用加密解密方法
查看>>
Web API 简单示例
查看>>
返璞归真 asp.net mvc (4) - View/ViewEngine
查看>>
ADO.Net对Oracle数据库的操作【转载】
查看>>
Contoso 大学 - 6 – 更新关联数据
查看>>
RESTful API 设计指南
查看>>
Windows 10正式版的历史版本
查看>>
Visual Studio 2015年预览设置: 辅助安装程序说明
查看>>
python开发学习-day03(set集合、collection系列 、深浅拷贝、函数)
查看>>